javascript 如何使用 AngularJS 处理数据的递归渲染
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18415142/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to handle recursive rendering of data using AngularJS
提问by chander
I have an application that has set of data that has a recursive relationship (a tree view, using recursion.) I've tried several ways to implement this via Angular, none of which seem to render a viable result.
我有一个应用程序，其中包含一组具有递归关系的数据（树视图，使用递归）。我已经尝试了几种通过 Angular 实现这一点的方法，但似乎没有一种方法能够呈现出可行的结果。
The idea here is that I wish to have this data rendered using a set of nested lists, allowing for numerous (7+) levels of depth. To simplify things (my actual application uses Restangular) I've built the following plunker:
这里的想法是我希望使用一组嵌套列表来呈现这些数据，从而允许多个 (7+) 级别的深度。为了简化事情（我的实际应用程序使用 Retangular），我构建了以下 plunker：
http://plnkr.co/edit/dKT9OvpsMgnxmLwgF0ij
http://plnkr.co/edit/dKT9OvpsMgnxmLwgF0ij
While the "top" level data renders correctly (just the first title) my attempt to recurse using nested controllers seems to fail miserably. The idea here is that each "child" in the tree is rendered using it's own controller, which can then render it's children, and so-on and so-forth. I realize that nested controllers might not be the "best" way to go, but after much searching I haven't found a "better" alternative.
虽然“顶级”数据正确呈现（只是第一个标题），但我尝试使用嵌套控制器进行递归的尝试似乎失败了。这里的想法是树中的每个“孩子”都使用它自己的控制器渲染，然后控制器可以渲染它的孩子，等等。我意识到嵌套控制器可能不是“最佳”的方式，但经过多次搜索后，我还没有找到“更好”的替代方案。
It's important that the resulting solution preserves the concept of "nesting" here (each element appearing below its parent element, with a slight indent.)
生成的解决方案在这里保留“嵌套”的概念很重要（每个元素都出现在其父元素下方，并带有轻微的缩进。）
回答by Anton
rather than nest your controllers, nest the data and just have the one controller.
与其嵌套控制器，不如嵌套数据并只拥有一个控制器。
the view is handled by a template that references itself recursively.
视图由递归引用自身的模板处理。
as chadermani has linked to, there are some answers out there.
正如 chadermani 所链接的，那里有一些答案。
here is a fiddle with a great example (not my code)
这是一个很好的例子（不是我的代码）
http://jsfiddle.net/brendanowen/uXbn6/8/
http://jsfiddle.net/brendanowen/uXbn6/8/
and the code from the fiddle
和小提琴中的代码
<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: []}];
}]);
回答by Jesus Rodriguez
If you are familiarized with batarang tool, it has a treeview of scopes. You can see the source here:
如果您熟悉 batarang 工具，它会提供范围树状视图。你可以在这里看到来源：
https://github.com/angular/angularjs-batarang/blob/master/js/directives/scopeTree.js
https://github.com/angular/angularjs-batarang/blob/master/js/directives/scopeTree.js
The idea is simple. Using $compile to recursively render that directive for every children it finds until there is no more children to render.
这个想法很简单。使用 $compile 为它找到的每个子节点递归渲染该指令，直到没有更多子节点要渲染。
I saw that same idea for other alternatives, take a look here:
我看到了其他替代方案的相同想法，请看这里：
回答by Pankaj Bodani
Try this for a nice clean example
试试这个作为一个漂亮干净的例子
http://codrspace.com/build80/create-recursive-tree-structure-using-template-in-angularjs/
http://codrspace.com/build80/create-recursive-tree-structure-using-template-in-angularjs/
