Question

我正在尝试构建一个显示菜单的递归角度指令，但是当浏览器尝试渲染它时，浏览器会停滞不前，这可能是因为某些原因无限循环渲染，但我无法弄清楚如何以优雅的方式解决它。

我使用的是两条指令：

category-menu加载json内容并创建category-menu-item的内部指令。
category-menu-item表示菜单子项。如果category-menu-item数组不为空，则此指令创建内部nodes指令。

JSON数据结构的示例（一个菜单项包含另一个菜单项）：

[{
    "id": 1,
    "title": "Sample title",
    // array of inner nodes (with the same structure as this one)
    "nodes": [{
        "id": 2,
        "title": "inner title",
        "nodes": []
    }]
}]

这是两个指令的代码：

    app.directive('categoryMenu', ['$http', function($http) {
        return {
            restrict: 'E',
            templateUrl: 'app/templates/categoryMenu.html',
            link: function (scope, elem, attrs) {
                // set scope.nodes with some fake data. 
                // originally retreives the data using $http.get
                scope.nodes = [{
                    "id": 4,
                    "title": "title 4",
                    "nodes": [{
                        "id": 9,
                        "title": "title 9",
                        "nodes": [{
                            "id": 10,
                            "title": "title 10",
                            "nodes": [{
                                "id": 12,
                                "title": "title 12",
                                "nodes": []
                            }, {
                                "id": 13,
                                "title": "title 13",
                                "nodes": []
                            }]
                        }]
                    }]
                }];
            }
        }
    }])
        .directive('categoryMenuItem', [function() {
            return {
                restrict: 'E',
                scope:{
                    category: '='
                },
                templateUrl: 'app/templates/categoryMenuItem.html'
            }
        }]);

这是category-menu指令的模板：

<li class="dropdown">
    <a class="dropdown-toggle" href="#">
        Catalog
        <i class="fa fa-angle-down"></i>
    </a>
    <ul class="dropdown-menu" ng-if="nodes.length!=0">
        <category-menu-item ng-repeat="node in nodes" category="node"></category-menu-item>
    </ul>
</li>

这是category-menu-item指令的模板：

<li class="dropdown-submenu" ng-if="category.nodes.length!=0">
    <a href="#/categories/{{category.id}}">{{category.title}}</a>
    <ul class="dropdown-menu">
        <category-menu-item ng-repeat="node in category.nodes" category="node"></category-menu-item>
    </ul>
</li>
<li ng-if="category.nodes.length==0"><a href="#/categories/{{category.id}}">{{category.title}}</a></li>

这是更复杂的数据：

[{
    "id": 4,
    "title": "title 4",
    "nodes": [{
        "id": 9,
        "title": "title 9",
        "nodes": [{
            "id": 10,
            "title": "title 10",
            "nodes": [{
                "id": 12,
                "title": "title 12",
                "nodes": []
            }, {
                "id": 13,
                "title": "title 13",
                "nodes": []
            }]
        }]
    }]
}]

谢谢！

递归角度指令

0 个答案: