如何使用AngularJS处理数据的递归呈现

Question

我有一个应用程序，它有一组具有递归关系的数据（使用递归的树视图）。我已经尝试了几种通过Angular实现这一点的方法，但似乎都没有产生可行的结果。

这里的想法是，我希望使用一组嵌套列表来呈现这些数据，从而允许许多（7+）级别的深度。为了简化事情（我的实际应用程序使用Restangular），我构建了以下plunker：

http://plnkr.co/edit/dKT9OvpsMgnxmLwgF0ij

虽然"顶级"数据呈现正确（只是第一个标题），但我使用嵌套控制器递归的尝试似乎失败得很惨。这里的想法是，树中的每个"子级"都使用它自己的控制器进行渲染，然后控制器可以渲染它的子级，依此类推。我意识到嵌套控制器可能不是"最好"的方法，但经过多次搜索，我还没有找到"更好"的替代方案。

重要的是，得到的解决方案在这里保留了"嵌套"的概念（每个元素都出现在其父元素下方，带有轻微的缩进。）

Answer 1

与其嵌套控制器，不如嵌套数据并只有一个控制器。

视图由一个递归引用自身的模板处理。

正如查德曼尼所说的那样，有一些答案。

这是一个很好的例子（不是我的代码）

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为它找到的每个子级递归地呈现该指令，直到没有更多的子级要呈现为止。

我在其他选择中也看到了同样的想法，看看这里：

可以用Angular制作树状视图吗？

Answer 3

尝试这个方法来获得一个干净的示例

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