如何使用 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>

这适用于demo。

---

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

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>

工作（demo-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: "@"。这是一个有效的sample。