子オブジェクトの量が不明確なng-repeatディレクティブの問題

Question

私はツリー構造のデータを扱っています。親は不確定な量の子を持つことができ、それらの子は不確定な量の子などを持つことができます。JSON形式が素敵な入れ子構造になっています。しかし、角型テンプレートを作成すると、どのように不確定性を説明できますか？

はここに私の試みです：

<div ng-repeat="object in manhole.data"> 

    <div ng-if="object.object" 
     ng-repeat="childObject in object.object"> 

    <div ng-if="childObject.object" 
     ng-repeat="childChildObject in childObject.object"></div> 

    </div> 

</div> 

はこれまでのところ、これが唯一の最大深さのツリー構造のために動作します= 2

Answer 1

あなただけngのリピートとすることはできません。

あなたのベストチャンスは、新しい子供が見つかったときに自分自身を入れ子にする指示文を使用することです。

これは私がサブレベルの不確定数のメニューを作成するために作られた古いディレクティブですが、私はそれはあなたに助けになることを願って：http://plnkr.co/edit/8JL0Op?p=preview
それを行うには良い方法は、（私はまだあったとき、私はこれをしなかった、おそらくあります角学習）が、私はあなたがここからアイデアを得ることができると思い

コード：

angular.module('app', []) 
.controller('Controller', ['$scope', '$timeout', function($scope, $timeout) { 
$scope.name = "Test"; 
$scope.values = [ 
    {"name":"test1"}, 
    {"name":"test2", children:[ 
    {"name":"test21"}, 
    {"name":"test22"}, 
    {"name":"test23", children:[ 
    {"name":"test231"}, 
    {"name":"test232"}, 
    {"name":"test233"} 
    ]} 
    ]}, 
    {"name":"test3"}, 
    ]; 
}]); 

angular.module('app').directive('hyMenu', function($compile) { 
    return { 
    restrict: 'A', 
    scope:{ 
     menuList:"=hyMenu" 
    }, 
    link: function(scope, element, attrs) {}, 
    templateUrl: function(element ,attrs) { 
     if(attrs.sub=="true"){ 
      return 'hy-sub.htm'; 
     } else { 
      return 'hy-menu.htm'; 
     } 
    } 
    }; 
}).directive('hyElement', function($compile) { 
    return { 
    restrict: 'A', 
    scope: true, 
    link: function(scope, element, attrs, menuCtrl) { 
     if(!scope.elem.children){ 
       scope.elem.children=[]; 
     } 
     if (scope.elem.children.length > 0){ 
      console.log(scope.elem.children); 
      element.append("<ul hy-menu='elem.children' data-sub='true'></ul>"); 
      $compile(element.contents())(scope); 
     } 
    }, 
    templateUrl: function(element, attrs) { 
     return 'hy-elem.htm'; 
    } 
    }; 
}); 

テンプレート：

index.htmを

<div class="hy-menu" hy-menu="values"></div> 

HY-menu.htm

<ul> 
    <li ng-repeat="elem in menuList" hy-element="elem"></li> 
</ul> 

HY-sub.htm

<li ng-repeat="elem in menuList" hy-element="elem"></li> 

HY-elem.htm

{{elem.name}}