angularjs - transclude:'element'和templateUrl一起可行吗？

我有一条指令，将元素放在隔离的范围内并对其应用控制器，以便它可以处理状态，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想要与指令的内容一起追加，所以我使用transclude: '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下载的（请参阅dev工具中的内容），但不能在链接功能内使用，也不能在Transclude中使用。我想念什么吗？在这方面找不到任何帮助，我已经找了几天。

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

最佳答案

评论后编辑：

我用以下内容更新了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);
      });
    }
  }
});

如果使用transclude; 'element'，则必须使用replace: true，对此有一些解释see this issue。如果使用transclude: true，则可以根据要在其上应用该指令的原始HTML节点（无论它是否仍然存在）的最终结果，为replace使用所需的任何值。



以下是原始答案，无故保留在此处...

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

.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。

关于angularjs - transclude:'element'和templateUrl一起可行吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23039235/