angularjs - 嵌入: 'element' along with templateUrl, 可行吗？

Question

我有一个指令，将元素放在一个隔离的范围内并向其应用 Controller ，以便它可以处理状态、AJAX 调用和验证。

<div login> 
  <div class="dropdown" ng-click="loginctrl.showForm()">
    Login <span class="caret"></span>
  </div>
</div>

当前嵌入的元素变为:

<!-- login -->
<div class="login">
  <div class="dropdown" ng-click="loginctrl.showForm()">
    Login <span class="caret"></span>
  </div>
</div>

但是我有一个 templateUrl，我想将其与指令的内容一起附加，因此我使用 transinclude: 'element' 来细化嵌入:

angular
.module('Login.module', [])
.controller('LoginCtrl', function(){
  this.login = function(){
     // do ajax calls for login
  };

  this.logout = function(){ 
     // do ajax calls for logout
  };

  this.facebook = function(){  
    // do ajax calls for facebook login
  };

  this.showForm = function(){
     // shows the template form
  };

  this.user = {}; // user model
})
.directive('login', function(){
  return {
    restrict: 'A',
    transclude: 'element',
    controllerAs: 'loginctrl',
    controller: 'LoginCtrl',
    replace: false,
    templateUrl: '/templates/login',
    link: function(scope, element, attrs, ctrl, transclude){
      transclude(scope, function(clone){
        clone.wrap('<div class="login"></div>');
        element.after(clone); // "element" is the <!-- login --> HTML comment
        // "clone" is the transcluded contents of the div, that is the login with ng-click, etc
      });
    }
  }
});

templateUrl(即登录/注册表单)通过AJAX下载(在开发工具中查看)，但它不能在链接函数或嵌入中使用。我错过了什么吗？在这方面找不到任何帮助，我已经找了几天了。

问题的简化版本 http://plnkr.co/edit/NzS7cAej17RnQxARlli3?p=preview

Answer 1

评论后编辑:

我已更新this plnkr与以下内容，我认为这符合你的要求。我对正在发生的事情做了一些额外的解释。

.directive('login', function() {
  var useElementTransclusion = true;
  var replace = true;
  return {
    restrict: 'A',
    transclude: useElementTransclusion ? 'element' : true,
    controllerAs: 'loginctrl',
    controller: 'LoginCtrl',
    replace: useElementTransclusion ? true : replace,
    templateUrl: 'login.html',
    link: function(scope, element, attrs, ctrl, transclude) {
      // If transclude is 'element', then the element argument is
      // the HTML comment which is put in the place of the entire
      // element on which the directive was applied.
      // If transclude is true, then the element argument depends
      // on the value of replace. If replace is true then element 
      // is the content of the template. If replace is false then
      // element is the element on which the directive was applied.
      transclude(scope, function(clone) {
        // If transclude is 'element' then clone is an array
        // containing the single element on which the directive
        // was applied.
        // If transclude is true then clone is an array containng
        // the children of the element on which the directive was
        // applied.
        element.wrap('<div class="login"></div>');
        element.after(clone);
      });
    }
  }
});

如果你使用transinclude; 'element' 那么你必须使用 replace: true，作为某种解释 see this issue 。如果您使用 transinclude: true ，您可以使用任何您想要的 replace 值，具体取决于您想要的相对于应用该指令的原始 HTML 节点的最终结果(无论它是否仍然存在)。

<小时/>

以下是原答案，无特殊原因留在这里...

不完全确定这是否会导致您期望的确切结果，但是......

.directive('login', function() {
  return {
    restrict: 'A',
    transclude: 'element',
    controllerAs: 'loginctrl',
    controller: 'LoginCtrl',
    replace: true,
    templateUrl: '/templates/login',
    link: function(scope, element, attrs, ctrl, transclude) {
      transclude(scope, function(clone) {
        element.after(clone);
        clone.wrap('<div class="login"></div>');
      });
    }
  };
})

如this fork of your plnkr中所示.

变化是:

• 将替换更改为“true”
• 在包装之前将克隆添加到 DOM，以便包装也添加到 DOM。