为什么 Angular.js 如此频繁地使用 ng-change 调用我的函数，我如何让它每次更改只调用一次？答案

【问题标题】：Why is Angular.js calling my function so frequently with ng-change and how do I make it call only once per change?为什么 Angular.js 如此频繁地使用 ng-change 调用我的函数，我如何让它每次更改只调用一次？
【发布时间】：2013-07-22 10:48:50
【问题描述】：

在阅读了许多教程之后，我正在构建我的第一个合适的 angular.js 应用程序。我遇到了ngChange 指令的问题。每次用户更改下拉列表的值时，我都尝试使用它来调用函数。我发现它在页面加载时多次调用该函数，并且每次选择该选项时也会多次调用该函数。

我整理了this jsfiddle，这表明了我遇到的问题。

我想知道为什么它会表现出这种行为，以及如何实现我想要的结果，即每次更改选项时调用一个函数，并且在页面加载时不调用 change()。（第二个标准对我的应用来说不太重要，但我还是想知道如何抑制这种行为）。

我为你们中的那些可能能够立即发现错误的人复制了下面的代码。

HTML

<body ng-app ng-controller="Controller">
<div>
    <h2>Number of changes: {{numOfChanges}}</h2>
    <select ng-change="{{change()}}" ng-model="currentSelection">
    <option ng-repeat="option in options">{{option}}</option>
    </select>
</div>
</body>

JavaScript

Controller = function($scope) {
    $scope.numOfChanges = 0;
    $scope.change = function() {
        $scope.numOfChanges++;
    }
    $scope.options = ["do", "ray", "me", "far", "so", "la", "tee","dah"]
}

我知道这很可能是由于我对角度方法的不当使用/理解造成的。我很感激能解决这个小例子的所有失败的答案。

【问题讨论】：

标签： javascript angularjs html-select

【解决方案1】：

ng-change 中的任何内容都已被 angular 识别，因此您无需将其包装在 {{ }} 中。只需ng-change="change()" 即可。

将其包裹在大括号中将导致 Angular 在页面加载时以及任何时候更新视图时对其进行评估，因此它会触发多次。

【讨论】：

谢谢！这种见解刚刚修复了我遇到的许多其他错误。

【解决方案2】：

从您的 ng-change() 代码中删除 {{ }}

<select ng-change="change()" ng-model="currentSelection">

{} 用于绑定，因此您正在触发更改事件，因此绑定不存在。

你最好看看这个ngChange 文档

Updated Fiddle

【讨论】：

太棒了。我认为文档是我度过一个下午的好地方。谢谢！

【解决方案3】：

DKM 和 jonnyynnoj 的回答已经解释了您必须做什么才能使 ng-change 发挥作用。

在您的示例中，更改侦听器触发 10 次的原因是因为“摘要”周期更新了 10 次，然后按照此处的说明中止：http://docs.angularjs.org/api/ng.$rootScope.Scope#$digest

$digest() 由 AngularJS 直接调用。以下是解释它的文档的解释：

处理当前作用域及其子作用域的所有观察者。因为观察者的监听者可以改变模型，所以 $digest() 保持调用观察者，直到没有更多的听众被解雇。这表示有可能陷入无限循环。该功能将 throw '超出最大迭代限制。'如果迭代次数超过 10 个。

在 javascript 开发者控制台中，您还可以看到您的示例引发以下错误：错误：已达到 10 个 $digest() 迭代。中止！

【讨论】：