Angularjs中的指令是如何工作的？

我正为一个问题苦苦挣扎，不明白为什么会这样

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

HTML:

在html中，我通过ni菜单调用niMenu。该指令有一个模板和一个链接函数，将菜单服务放入模块的作用域中。在指令的模板中，我使用Menu.getKids（）并获取所有顶级项。稍后，在ng使用的模板中，我调用Menu.getKids（item.id）并获取特定项的所有子项

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

有人能解释一下为什么会发生这种情况吗？
好的，所以它执行不止一次的原因是因为摘要循环就是这样工作的：它不断地执行所有视图表达式（就像你传递给ngRepeat的那个），直到它不表达任何更改为止。有关更多信息，请参阅，但要点是：它将始终至少执行一次，但通常会执行更多次

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

不幸的是，这意味着您必须重新调整指令的工作方式。不管怎样，这都是一个好主意，因为您的指令可以重写为更简单一点——例如，您不需要任何ngInclude

您要做的是创建两个指令，因为您有两个模板：一个表示整个菜单，另一个表示子项（而子项又可以有子项）。
菜单
指令应在顶级菜单项上重复，为每个菜单项绘制一个
菜单项
。
menuItem
指令应检查子项，并在必要时使用更多的
menuItem
s重复这些子项。下面是Andy Joslin创建的一个示例，介绍如何实现递归目录：

实现类似的内容超出了这个问题的范围，但是如果您需要帮助，可以尝试一下并发布一个新问题

祝你好运
 哎呀，你把小提琴的链接给断了。：-）@乔希·戴维米勒修好了，太棒了！这肯定能澄清一切。谢谢你的回答。很好的指导！只要给那些想在plunker中使用这个例子的人一个提示。最好将“choiceDirective”定义为一种长期的方式，以避免在使用迷你和丑八怪时出现问题。因此，不要使用
app.directive（'choice'，function（$compile）
而使用
app.directive（'choice'，['$compile'，function（$compile）
。不要忘记，您需要在指令方法的末尾添加一个结束符
]
。
<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>

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;
            }
        };
    }
);