Question

https://plnkr.co/edit/WzLez5XElbOHRTvXEJFc?p=preview

      function DirectiveController($scope, $element)
 {
 $scope.Array = ["a", "b"];
    $scope.me = function() {
      console.log("i ran");
    };

};


 //Directive HTML
<div class="cool picker" ng-repeat="item in Array">
        <input ng-value="me()">
           {{item}}
        </input>
</div>

指令控制器中的函数被调用4次，而指令仅通过ng-repeat运行2次。我在Plunker中创建了我的代码版本，因此像＃34;摆脱孤立范围的建议不会得到帮助＆＃34;。

我无法在这里找到一个干净的解释，只关注那个没有涉及大量代码或Plunker示例的问题。请告知... please make sure ur console is set on plunker] 1

Answer 1

您所看到的是digest cycle在工作。摘要周期是Angular’s自动更新魔法的工作原理 - 这就是输入框中的输入会自动更新引用其值的任何内容的原因。

当摘要周期运行时，它会有效地重绘页面上可能已更改的所有内容。

Angular使用一些技巧来找到可能已更改的所有内容，主要技巧是观察者。当您使用ng-if和ng-class等指令时，以及使用{{yourBindingHere}}等绑定时，会自动创建这些观察者。

这些内容中的每一个都会注册watcher。当Angular的摘要周期运行时，每个观察者都被要求更新其状态。在ng-class的情况下，它将重新运行绑定到它的函数，以查看是否需要更改任何内容。这就是您的控制器功能多次运行的原因，并且每次页面上的某些内容发生变化时它都会再次运行。

现在，因为你使用插值{{}}，它会强制Angular运行一次，并使用ng-value函数强制它再次运行。

最佳做法是不在ng-repeat中使用函数，因为它总是强制循环检查更新。

最后尽可能使用one time binding来阻止创建任何观察者。

Angular.JS ng-Repeat in指令运行两次

1 个答案: