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。

如何使用javascript

2 个答案: