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-service放入模块范围。在指令的模板中，我使用Menu.getKids（）并获取所有顶级项目。之后，在ng-include使用的模板中，我调用Menu.getKids（item.id）并获取特定项目的所有子项。

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

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

Answer 1

好吧，所以它不止一次执行的原因是因为这就是摘要循环的工作方式：它会连续执行所有视图表达式（比如你传递给ngRepeat的表达式），直到它表示没有变化。有关详细信息，请参阅this answer，但最重要的是：它将始终执行至少一次，但通常会更多。

使用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。

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

祝你好运！

Angularjs中的指令如何工作？

1 个答案: