2

我正在为一个问题而苦苦挣扎，无法弄清楚为什么会发生这种情况。

我有一个模块（portfolioModule）、服务（Menu）和一个指令（niMenu）。该指令应该呈现一个菜单项及其子项。

HTML：

<div ng-app="portfolioModule">
    <script id="menuItem" type="text/ng-template">
    <li>
        <a>{{item.name}}</a>
        <ul>
            <li ng-repeat="item in menu.getKids(item.id)" ng-include="'menuItem'"></li>
        </ul>
    </li>
    </script>

    <div>
        <div ni-menu="test">test1</div>
    </div>
</div>

JavaScript：

var portfolioModule = angular.module('portfolioModule', []);

portfolioModule.factory('Menu', function() {
        var items = [
            {
                "parent_id": null,
                "id": 1,
                "name": "foo"
            }, {
                "parent_id": 1,
                "id": 2,
                "name": "foo-bar"
            }
        ];
        this.getKids = function(parent_id) {
            var result = [];
            parent_id = parent_id || null;

            console.log('getKids', parent_id);
            angular.forEach(items, function(value) {
                if (value.parent_id === parent_id) {
                    result.push(value);
                }
            });
            return result;
        };

        return this;
    }
);

portfolioModule.directive('niMenu', function(Menu) {
        var niMenu;
        return niMenu = {
            template: '<ul ng-include="\'menuItem\'" ng-repeat="item in menu.getKids()"></ul>',
            restirt: 'A',
            link: function(scope, element, attrs) {
                console.log('link');
                scope.menu = Menu;
            }
        };
    }
);

工作演示：http: //jsfiddle.net/VanSanblch/Ng7ef。

在 html 中，我通过 ni-menu 调用 niMenu。该指令有一个模板和一个链接功能，将 Menu-service 放入模块的范围内。在指令的模板中，我使用 Menu.getKids() 并获取所有顶级项目。后来，在 ng-include 使用的模板中，我调用 Menu.getKids(item.id) 并获取特定项目的所有子项。

除了一个小细节外，一切都很好。如果您打开控制台，那么您可以观察到 getKids 的调用比我预期的要多得多。例如，对于两个元素的数组，getKids 调用的次数为九。

有人可以解释为什么会发生这种情况吗？

4

1 回答 1

6

好的，所以它执行不止一次的原因是因为这就是摘要循环的工作方式：它不断地执行所有视图表达式（就像你传递给 ngRepeat 的那个），直到它表示没有变化。有关更多信息，请参阅此答案，但要点是：它总是至少执行一次，但通常更多。

使用 ngRepeat 时，您通常希望避免从函数中获取数据，因为它会对性能产生负面影响；当数据从未改变时，为什么要多次调用同一个函数？更好的方法是让您的控制器（或在本例中为指令）执行您的函数并将结果存储在范围内，因此您的 ngRepeat 看起来像ng-repeat="item in items"而不是ng-repeat="item in getItems()".

不幸的是，这意味着您必须重新调整指令的工作方式。无论如何，这被证明是一个好主意，因为您的指令可以重写为更简单一些 - 例如，您不需要任何 ngInclude。

您要做的是创建两个指令，因为您有两个模板：一个代表整个菜单，另一个代表一个子项（反过来，它可以有子项）。该menu指令应在顶级菜单项上重复，menuItem为每个菜单项绘制一个。该menuItem指令应该检查孩子，并在必要时用更多menuItem的 s 重复这些。等等。这是一个由 Andy Joslin 创建的示例，说明如何完成递归目录： http: //plnkr.co/edit/T0BgQR。

实现这样的事情超出了这个问题的范围，但是如果你需要帮助，可以尝试一下并发布一个新问题。

祝你好运！

于 2013-03-07T06:09:06.490 回答