Angularjsのネストされたディレクティブをjavascriptでコンパイルする方法

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ファイルでそれを使用することができます。これは、ここにdemo作品

<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>をコンパイルする新しい<hero-list>ディレクティブを作成しました。

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）

私は、これはadvencedレベルの問題だと思います。

Answer 1

2番目の例では、heroディレクティブに数字の代わりにオブジェクトを渡すので、model: "@"の代わりにmodel: "="を使用する必要があります。ここには働いてsampleです。

Answer 2

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); 
      } 
     }); 
     }); 
    } 
    } 
});