Angular 指令正在加载多次答案

【问题标题】：Angular Directive are Loading Multiple timeAngular 指令正在加载多次
【发布时间】：2015-08-17 20:00:21
【问题描述】：

这是 Angular 中的错误还是我遗漏了什么：

从指令的模板调用函数表明该函数执行了 11 次！使用模板网址，22 次！使用字符串模板。

angular.module('testDirective', [])
        .directive('myDirective', function() {
          return {
            scope:{},
            template: '{{increment()}} {{count}}',
            controller: function($scope) {

              $scope.count = 0;

              $scope.increment = function() {
                $scope.count += 1;
              };
            }
          };
        })

HTML：

<body ng-app="testDirective">
    <my-directive></my-directive>
</body>

结果：

Here is a Plunker 同时使用 template 和 templateUrl 方法。

以转发器中涉及方法调用为例，这是一个相当大的问题，这最终导致调用同一方法的时间大大超过了应有的时间。

任何人都可以对此有所了解吗？

【问题讨论】：

这不是多次加载的指令。这是一个被多次执行的绑定表达式，与 Angular 的预期工作完全一样。

标签： angularjs directive

【解决方案1】：

{{increment()}} 在您看来，每次调用摘要循环时都会调用，就像任何绑定表达式一样。如果您在控制器函数本身中递增，而不是从视图模板调用的绑定函数，则表明该指令正在“加载”多次。但是 Angular 的本质是，任何绑定的表达式都将在摘要循环期间反复检查更改，并且您希望只发生一次（甚至是可预测的次数）的任何事情都不应该发生在绑定到内容的表达式中元素。另一方面，绑定到事件处理程序的表达式仅在事件触发时执行。

模型需要一些时间来适应。尽管旧文档反对它，但您可以在内容绑定表达式中使用函数，但它们永远不应该改变状态。你无法真正控制何时调用 $digest()，如果你是 thinking in the Angular way，你不会想要。

【讨论】：

【解决方案2】：

我还发现这篇与同一问题相关的帖子很有用： Using ng-class with a function call - called multiple times

一次性绑定也可以是一种解决方案，这里有一些相关的情况： Angular lazy one-time binding for expressions

【讨论】：

【解决方案3】：

每次更新视图时都会调用increment()。加载时，increment() 被调用，计数增加 1，这导致视图被更新，increment() 被再次调用。

如果你查看你的控制台，你会看到 Angular 告诉你它卡在一个无限的$digest loop。

【讨论】：