Question

这是Angular中的错误还是我遗漏了一些东西：

从指令模板调用函数显示该函数执行了11次！用templateurl，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>

结果：

带有template和templateUrl方法的

Here is a Plunker。

例如，当转发器中涉及方法调用时，这是一个非常严重的问题，这最终会在相同的时间内调用相同的方法。

有人可以对此有所了解吗？

Answer 1

每次调用摘要周期时，都会调用视图中的

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

该模型需要一些时间来习惯。虽然旧文档反对它，但可以在内容绑定表达式中使用函数，但它们永远不会改变状态。您无法真正控制何时调用$ digest（），如果您重新thinking in the Angular way，则您不会想要。

Answer 2

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

此外，一次性绑定也可以是解决方案，例如： Angular lazy one-time binding for expressions

Answer 3

每次更新视图时都会调用

increment（）。在加载时，调用increment（），并且计数加1，这会导致视图更新并再次调用increment（）。

如果您查看控制台，您会看到Angular告诉您它已陷入无限$ digest循环。

Angular Directive正在加载多次

3 个答案: