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 编译并在视图上看到一个表达式时，例如 ng-class="function()"、ng-model="toto"，会为它创建一个 $watch。在每个摘要循环中，都会通过脏检查评估手表，以确定模型中是否有任何变化。

因此，在您的 ng-repeat 中，您有：电话集合上有一个观察者，每个电话实例上有一个观察者，功能上有一个观察者。由于视图上的函数不是范围变量，因此 Angular 无法知道函数的结果是否已更改（您可能会影响函数中的其他范围变量），因此它会重新评估每个摘要循环的函数结果.

所以你有电话 + 电话 + 功能 + 最后一个摘要周期来验证一切是否正常：4 个周期

一个好的做法是不要在视图中使用函数，除非是极少数情况。相反，将函数的结果存储在范围变量中，并在视图中呈现此变量。

更新：

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

Answer 2

您通过 $http 进行了多少次 ajax 调用？他们每个人都会触发一个$digest。此外，如果发生了变化（新数据已经到达），另一个 $digest 将运行以确保它涵盖了所有内容。

为避免这种情况，请在父元素的 ng-if 上添加一个布尔值，并在所有 ajax 调用到达后将其设置为 true（请参阅 $q）。