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

Question

我有一个应用程序，其中包含一组具有递归关系的数据( TreeView ，使用递归。)我已经尝试了几种方法来通过 Angular 实现它，但似乎没有一种方法可以提供可行的结果。

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

http://plnkr.co/edit/dKT9OvpsMgnxmLwgF0ij

虽然“顶层”数据正确呈现(只是第一个标题)，但我使用嵌套 Controller 进行递归的尝试似乎惨遭失败。这里的想法是树中的每个“ child ”都使用它自己的 Controller 呈现，然后可以呈现它的 child ，依此类推。我意识到嵌套 Controller 可能不是“最佳”方式，但经过大量搜索后我还没有找到“更好”的替代方案。

重要的是，生成的解决方案在此处保留“嵌套”的概念(每个元素出现在其父元素下方，略微缩进。)

Answer 1

与其嵌套 Controller ，不如嵌套数据并且只有一个 Controller 。

View 由递归引用自身的模板处理。

正如 chadermani 所链接的那样，那里有一些答案。

这是一个很好的例子(不是我的代码)

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

和 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: []}];
}]);