我有一个应用程序，该应用程序具有一组具有递归关系的数据（树视图，使用递归。）我尝试了几种通过 Angular 实现这一点的方法，但似乎都没有一个可行的结果。
这里的想法是我希望使用一组嵌套列表来呈现这些数据，从而允许许多（7+）级别的深度。为了简化事情（我的实际应用程序使用 Restangular），我构建了以下 plunker：
http://plnkr.co/edit/dKT9OvpsMgnxmLwgF0ij
虽然“顶级”数据正确呈现（只是第一个标题），但我使用嵌套控制器进行递归的尝试似乎失败了。这里的想法是树中的每个“孩子”都使用它自己的控制器渲染，然后可以渲染它的孩子，等等。我意识到嵌套控制器可能不是“最好”的方式，但经过大量搜索后，我还没有找到“更好”的替代方案。
重要的是，生成的解决方案在此处保留“嵌套”的概念（每个元素都出现在其父元素下方，并带有轻微的缩进。）
而不是嵌套您的控制器，嵌套数据并只拥有一个控制器。
视图由递归引用自身的模板处理。
正如 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: []}];
}]);
如果您熟悉batarang 工具，它有一个范围的树形视图。您可以在此处查看源代码：
https://github.com/angular/angularjs-batarang/blob/master/js/directives/scopeTree.js
这个想法很简单。使用 $compile 为它找到的每个孩子递归地渲染该指令，直到没有更多的孩子要渲染。
我在其他替代方案中看到了相同的想法，请看这里：