如何處理使用AngularJS的數據遞歸呈現

Question

我有一個具有遞歸關係（樹視圖，使用遞歸）的數據集的應用程序。我嘗試了幾種方法來通過Angular實現這一點，沒有一個似乎會產生可行的結果。

這裏的想法是，我希望使用一組嵌套列表呈現這些數據，並允許多個（7+）級別的深度。爲了簡化的東西（我的實際應用程序使用Restangular）我已經建立了以下plunker：雖然「頂」級數據正確渲染（只是第一題）我試圖使用遞歸嵌套的控制器似乎

http://plnkr.co/edit/dKT9OvpsMgnxmLwgF0ij

悲慘地失敗。這裏的想法是，樹中的每個「孩子」都使用它自己的控制器來呈現，然後可以呈現它的孩子，等等。我意識到嵌套控制器可能不是「最好」的方式，但經過多次搜索，我還沒有找到「更好」的選擇。

重要的是，得到的溶液保留的「嵌套」在這裏的概念（出現它的父元素下面的每個元素，有輕微的凹痕。）

Answer 1

，而不是窩你的控制器，巢中的數據，只是有一個控制器。

該視圖由遞歸引用自身的模板處理。

正如chadermani所說，那裏有一些答案。

這裏是一個很好的例子，一個小提琴（不是我的代碼）

http://jsfiddle.net/brendanowen/uXbn6/8/

，並從小提琴

<script type="text/ng-template" id="tree_item_renderer.html"> 
    {{data.name}} 
    <button ng-click="add(data)">Add node</button> 
    <button ng-click="delete(data)" ng-show="data.nodes.length > 0">Delete nodes</button> 
    <ul> 
     <li ng-repeat="data in data.nodes" ng-include="'tree_item_renderer.html'"></li> 
    </ul> 
</script> 

<ul ng-app="Application" ng-controller="TreeController"> 
    <li ng-repeat="data in tree" ng-include="'tree_item_renderer.html'"></li> 
</ul> 

angular.module("myApp", []). 
controller("TreeController", ['$scope', function($scope) { 
    $scope.delete = function(data) { 
     data.nodes = []; 
    }; 
    $scope.add = function(data) { 
     var post = data.nodes.length + 1; 
     var newName = data.name + '-' + post; 
     data.nodes.push({name: newName,nodes: []}); 
    }; 
    $scope.tree = [{name: "Node", nodes: []}]; 
}]); 

Answer 2

代碼如果您正在使用batarang工具熟悉，它有一個範圍樹視圖。你可以在這裏看到的來源：

https://github.com/angular/angularjs-batarang/blob/master/js/directives/scopeTree.js

的想法很簡單。使用$ compile爲每個找到的子元素遞歸地呈現該指令，直到不再有子元素進行呈現。

我看到其他的替代品同樣的想法，到這裏看看：

Is it possible to make a Tree View with Angular?

Answer 3

嘗試此一個乾淨的例子

http://codrspace.com/build80/create-recursive-tree-structure-using-template-in-angularjs/