javascript - ng-repeat 中的函数调用了 4 次(AngularJs)

Question

以下 HTML 代码用 21 个电话填充 ul:

<li ng-repeat="phone in phones" ng-class="{'digestTest': countDigestOccurences(phone) }">
  <p>{{phone.snippet}}</p>
</li>

countDigestOccurences 是一种 JavaScript 方法，它使用字典来跟踪每部手机调用 countDigestOccurences() 的次数。

$scope.countDigestOccurences = function(phone){
  var phoneFound = false;     
  $.each($scope.digestOccurencesPerPhone, function(){
      if(this.phone.id == phone.id){
        phoneFound = true;
        this.occurences++;
      }
  });

  if(!phoneFound)
  { 
    $scope.digestOccurencesPerPhone.push({
      phone: phone,
      occurences: 1
    });
  }
}

通过这个方法我可以清楚的看到countDigestOccurences被每部手机调用了4次。在我的一生中，我无法弄清楚为什么它被调用了 4 次。

更新:

即使 Phone 项目的 HTML 如下所示，循环次数仍将保持为 4:

    <li ng-repeat="phone in phones "
        class="thumbnail phone-listing" ng-class="{ 'digestTest': countDigestOccurences(phone),  'digestTestAgain': randomMethodDoesNothing() }">
      <p>{{phone.snippet}}</p>
    </li>

Answer 1

当 Angular 编译并在 View 上看到一个表达式时，比如 ng-class="function()"、ng-model="toto"，一个 $watch 是为它创建的。在每个摘要周期，watches 都会通过脏检查进行评估，以确定模型是否有任何变化。

因此在您的 ng-repeat 中，您有:电话集合上的一名观察者，每个电话实例上的一名观察者和函数上的一名观察者。由于 View 上的函数不是范围变量，angular 无法知道函数的结果是否已更改(您可能会影响函数中的其他范围变量)因此，它会为每个摘要周期重新评估函数结果.

所以你有 phones + phone + function + last digest cycle 来验证一切正常:4 个周期

除非极少数情况，否则最好不要在 View 中使用函数。相反，将函数的结果存储在作用域变量中并在 View 中呈现该变量。

更新:

由于下面的讨论，请注意只有一个 watch 是为 ng-class 指令创建的，它对应于 ng-class 的值。即，与:ng-class="{'toto' : functionOne(), 'titi' : functionTwo()}"， watch 开启:{'toto' : functionOne(), 'titi ' : functionTwo()}。从 AngularJs 指令代码发出:scope.$watch(attr[name], ngClassWatchAction, true);