如何使用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: []}];
}]);