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

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 中创建了自己的代码版本，因此诸如“摆脱孤立作用域”之类的建议无济于事。

• 我在这里找不到一个清晰的解释，它只关注这个问题，没有涉及大量代码或 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 来防止创建任何观察者。