角度指示文の中で継承された内容を繰り返す

Question

私は項目を入れ子にし、繰り返し項目のそれぞれの指示文の最初の呼び出しで宣言された継承された内容を繰り返す単純なツリー指示文をAngularで書くつもりです。

私はこれを試してみました

、

angular.module('angularTree',[]) 
    .directive('tree',['$compile',function($compile) 
    { 

     return { 

      scope:{item:"="}, 
      transclude:true, 
      template:"<div class='tree-item'><ng-transclude></ng-transclude>" + 
         "<div id='tree-content' class='tree-content'>" + 
          "<div ng-repeat='child in item.items'>" + 
           "<tree item='child'><ng-transclude></ng-transclude></tree>" + 
          "</div>" + 
         "</div>", 
      link:function(scope,element,attrs) 
      { 

      } 
     } 


    }]); 

をそして、それはポイントまで動作します。分割された内容でネストされたツリーが作成されます。

問題は、繰り返される子ディレクティブのスコープが、常に宣言された最初のアイテムを指していることです。だから私は私のコントローラでこのような変数を持っている場合...

var item = {name:John, items:[{name:Tony},{name:Jill}]}; 

そしてこの

<tree item="item"></tree> 

のようなディレクティブにそれを渡し、私はアイテムのネストされたリストを取得し、それらはすべて「ジョン」を言います。

これがなぜ起こるか二はちょうど最初と同じスコープを持っているとしているので、私は、見ることができます。..

私の質問は、私は子要素にトランスクルードコンテンツを繰り返すことについては行くだろうか...ですしかし、トップノードではなく子オブジェクトを指すスコープを使用していますか？

$ compile関数とtransclude関数を使用してみましたが、これを実行する方法が見つかりませんでした。

ありがとうございました

Answer 1

あなたのように動作するはずです。私はあなたがアイテムと子供を混ぜ合わせたと思う。あなたのコードが名前を出力する場所を示していないので、それを確認できません。

ng-repeatループ内で、childはitem.itemsの指定を参照しますが、項目はまだ外側項目と同じです。 I'veは、コメント欄で出力して、実施例を提供する：

angular.module('myApp', []) 
.directive('tree',[function($compile) { 
    return { 
     scope:{ 
     item: "=" 
     }, 
     transclude:true, 
     template: "{{item.name}}" + // John, Tony, Jill 
       "<div class='tree-item'><ng-transclude></ng-transclude>" + 
        "<div id='tree-content' class='tree-content'>" + 
        "<div ng-repeat='child in item.items'>" + 
         "{{item.name}}" + // John, John 
         "{{child.name}}" + // Tony, Jill 
         "<tree item='child'><ng-transclude></ng-transclude></tree>" + 
        "</div>" + 
        "</div>", 
     link: function(scope,element,attrs) {} 
    } 
    }] 
) 
.controller('treeCtrl', ['$scope', function($scope) { 
    $scope.item = { 
    name: 'John', 
    items: [ 
     {name: 'Tony'}, 
     {name: 'Jill'} 
    ] 
    }; 
}])