javascript - 带有 Angular Directive(指令)的嵌套树列表

Question

我在使用 Angular 的嵌套列表指令时遇到问题。每次我尝试运行代码时，当我递归调用该指令时，浏览器都会崩溃。

如果数据中的 children 属性包含项目，我想输出一个新的列表项。

这是我的代码的一个 fiddle ，我删除了对自身的指令调用，这样它就不会导致浏览器崩溃。 http://jsfiddle.net/8p3bf4ec/

JS:

var jsonData = {
    "title": "Home",
    "author": "Mary",
    "children": [
        {
            "title": "Clothing",
            "author": "Robert",
            "children": [
                {
                    "title": "Shirts",
                    "author": "Bill",
                    "children": []
                }
            ]
        },
        {
            "name": "Electronics",
            "author": "William",
            "children": []
        }
    ]
};

angular.module('myApp', []);

angular.module('myApp').directive('itemList', function() {
    return {
        scope: true,
        templateUrl: 'itemListTemplate.html',
        controller: function($scope) {
            $scope.nodes = jsonData;
            console.log($scope.nodes);
        }
    };
});

模板:

<div ng-app="myApp">

    <item-list></item-list>

    <script type="text/ng-template" id="itemListTemplate.html">
        <ul>
            <li ng-repeat="node in nodes">
                {{node.title}}
            </li>
        </ul>
        <!-- Removed this because it makes the browser crash
        <item-list></item-list>
        -->
    </script>

</div>

Answer 1

这是因为您无限迭代 jsonData 而不是每个节点的子节点。我想你根本不应该在这里使用指令，因为没有太多逻辑，而且它增加了不必要的复杂性。只需使用 ng-include 而不是指令。像这样的事情:

<script type="text/ng-template" id="tree-view">
<ul>
    <li ng-repeat="item in items">
        <!-- any data you want to display from item itself -->
        <div
            ng-if="item.children && item.children.length"
            ng-init="items=item.children"
            ng-include="'tree-view'">
        </div>
    </li>
</ul>
</script>

<div class="tree-view" ng-include="'tree-view'"></div>