angularjs - Angularjs 中的指令如何工作？

Question

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

我有一个模块(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.getKids() 并获取所有顶级项目。后来，在 ng-include 使用的模板中，我调用 Menu.getKids(item.id) 并获取特定项目的所有子项。

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

有人能解释一下为什么会发生这种情况吗？

Answer 1

好吧，它执行多次的原因是摘要循环的工作原理:它不断执行所有 View 表达式(例如传递给 ngRepeat 的 View 表达式)，直到它表示没有变化。请参阅this answer了解更多信息，但要点是:它总是至少执行一次，但通常会执行更多次。

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

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

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

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

祝你好运!