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 中创建了我自己的代码版本，因此建议 "get rid of isolated scope won't help".

我在这里找不到一个清晰的解释，它只关注没有涉及大量代码或 Plunker 示例的问题。请指教...please make sure ur console is set on plunker]1

Answer 1

您看到的是 digest cycle 在工作。摘要循环是 Angular’s auto-update 魔术的运作方式——这就是在输入框中键入内容会自动更新任何引用其值的内容的原因。

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

Angular 使用一些技巧来找到可能已经改变的一切，主要技术是观察者。当您使用 ng-if 和 ng-class 等指令以及使用 {{ yourBindingHere }}.

等绑定时，这些观察者会自动创建

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

现在，由于您正在使用插值 {{}}，它会强制 Angular 到运行一次，并且使用带有 ng-value 的函数会再次强制它。

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

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

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

Angular.JS ng-Repeat in directive runs twice

angularjs

angularjs-directive

ng-repeat