如何使用javascript编译Angularjs嵌套指令

Question

我有一个具有嵌套层次结构的嵌套指令。

angular.module("app", []);
angular.module("app").directive("hero", function () {
  return {
    restrict: "E",
    template: "<div>Hero {{number}}</div> <div ng-transclude></div>",
    scope: {
      number: "@"
    },
    transclude: true,
    link: function (scope) {

    }
  }
});

我可以在html文件中使用它，如下所示：

<div ng-app="app">
    <hero number="1">
      <hero number="2">
        <hero number="3"></hero>
      </hero>
    </hero>
</div>

这在这里演示 。

---

现在，我想动态地执行此操作，并且英雄模型项在控制器中：

angular.module("app").controller("mainController", function ($scope) {
  $scope.heros = [
    { number: "1" },
    { number: "2" },
    { number: "3" },
  ]
});

并创建了一个新的<hero-list>指令，该指令可编译控制器模型中的所有<hero> 。

angular.module("app").directive("heroList", function ($compile) {
  return {
    restrict: "E",
    scope: {
      data: "="
    },
    link: function (scope, element) {
      var temp;
        angular.forEach(scope.data, function(item){
            var tempScope = scope.$new(true);
          tempScope.model = item;

          var item = angular.element('<hero model="model"></hero>');

          if(temp){
                if(temp.children().length){
                    var k = temp.children().append(item)
                  temp=k;
              }else
                temp.append(item);                   
          }else{
                temp = item;
          }
          $compile(item)(tempScope);

      });

      element.append(temp);
    }
  }
});

我将像这样使用它，但是不会嵌套编译，而是在另一个下附加和编译：

<div ng-app="app">
  <div ng-controller="mainController">
     <hero-list data="heros"></hero-list>
  </div>    
</div>

工作（ 演示2 ）

我认为这是高级问题。

Answer 1

使用ngTransclude进行此操作有点挑战，但是如果您需要的话，我可以在此处为Plnkr提供替代方法！

要使div嵌套，您需要手动找到子项并向其附加另一个元素。
的HTML

<div ng-controller="mainController">
  <hero-list data="heros">
    <div ng-class='number'>Hero {{number}}</div>
  </hero-list>
</div>

指令（js）

angular.module("app").directive("heroList", function(){
        return {
      transclude: 'element',
      link: function(scope, el, attrs, ctrl, transclude) {

      var heros = scope.$eval(attrs.data);
      heros.forEach(function(each,idx) {
        transclude(function(transEl, transScope) {
          transScope.number = each.number;
          if(idx===0)
          {
            el.parent().append(transEl);
          }
          else
          {
            el.parent().find("div").append(transEl);
          }
        });
      });
    }
   }
});

Answer 2

在第二个示例中，您要在hero指令中传递一个对象而不是数字，因此您需要使用model: "="而不是model: "@" 。 这是一个工作示例 。