AngularJSでTreeViewを表示する一般的な方法

Question

私は、部分的にドキュメントのツリービューを表示することからなるプロジェクトに取り組んでいます。

私は最近問題に遭遇しましたが、解決方法はわかりませんので、私はここで助けを求めるために来ました。

問題は、必要なすべてのデータが含まれている配列があります。フォルダやフォルダのフォルダなどにドキュメントがあります...各フォルダの '子'をレンダリングする方法はわかりますが、問題は一般的にどのように行うのかわかりません。 私はより良い問題を説明するために単純なJSFiddleをコード化されました：http://jsfiddle.net/k3nj6pco/

あなたは子供1.1と1.2を示すことは容易であることがわかります。しかし、私は子を表示する方法を理解することができません1.1.1第3のng-repeatループを作ることなく。そして、私はn深度レベルに一般化したいと思います。

誰でもこの問題を解決できる方法は知っていますか？あなたのお時間をありがとうございました！

Answer 1

私はこれを再帰的なディレクティブで解決します。

それの要旨はあるrecursive directives

を見てみましょう：

<div ng-controller="IndexCtrl"> 
    <collection collection='locations'></collection> 
</div> 

app.directive('collection', function() { 
    return { 
     restrict: "E", 
     replace: true, 
     scope: { 
      collection: '=' 
     }, 
     template: "<ul><member ng-repeat='member in collection' member='member'></member></ul>" 
    } 
}) 

、その後：がある場合

<member ng-repeat='member in collection' member='member'></member> 

app.directive('member', function ($compile) { 
    return { 
     restrict: "E", 
     replace: true, 
     scope: { 
      member: '=' 
     }, 
     template: "<li></li>", 
     link: function (scope, element, attrs) { 
      if (angular.isArray(scope.member.children)) { 
       element.append("<collection collection='member.children'></collection>"); 
       $compile(element.contents())(scope) 
      } 
     } 
    } 
}) 

はそう、あなたのメンバーディレクティブ内のコレクションディレクティブをコンパイルしていますまだ子供たち。

種類について