范围计数器的值增加 1 会达到 10 次 $digest() 迭代。中止错误消息

Posted 2023-02-22

【中文标题】范围计数器的值增加 1 会达到 10 次 $digest() 迭代。中止错误消息

【英文标题】：Increment value of scope counter by 1 gives 10 $digest() iterations reached. Aborting error message

【发布时间】：2019-11-04 19:42:21

【问题描述】：

我正在尝试使用 angularjs and given is the JSFiddle for what I am trying to do

<div id="page-main-body">
  <div id="container" ng-repeat="hero in heroModel">
    <div id="page-header" ng-if="heroCounter === 1">
      I am header
    </div>

    <div id="page-body">
      <p>Name:  hero.Name </p>
      <p>Super hero identity:  hero.SuperHeroName </p>
    </div>

    <div id="page-footer" ng-if="heroCounter === 2">
      I am footer
    </div>
     incrementHeroCounter()   resetHeroCounter() 
  </div>
</div>

我的问题是，如果我的模型包含 4 个元素，它可以正常工作，但是如果我从模型中删除一个元素，我看不到页脚 div，并且我在控制台中收到一条错误消息，上面写着

达到 10 次 $digest() 迭代。中止！在最后 5 次迭代中触发的观察者：

所以我认为这是因为我正在更新 $scope 变量并根据变量值绘制页眉和页脚。

如果我的数据模型包含 4 或 6 个元素，一切正常，但如果我将元素计数从偶数 (2,4) 更改为奇数 (1,3)，我会收到 $digest 错误

我也阅读了angular documentation for this error，但似乎我的模型也保持不变，没有任何变化，唯一变化的变量是计数器的 $scope 变量，我知道这可能会导致摘要周期发生变化，但是如何我是缓存它还是使用不同的技术来实现我在这里尝试做的事情

我尝试了几个以前的stack links，但无法从中得到一个好的方向，我不确定对于这样一个简单的事情我应该使用service 还是$rootScope 也许有更好的方法这样做。

下面是我的代码的样子，你也可以look at the fiddle 告诉我我在这里做错了什么

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) 
  $scope.heroCounter = 1;

  $scope.incrementHeroCounter = function() 
    $scope.heroCounter++;
  ;

  $scope.resetHeroCounter = function() 
    if ($scope.heroCounter === 3) 
      $scope.heroCounter = 1;
    
  ;

  $scope.heroModel = [
    
      SuperHeroName: "Superman",
      Name: "Clark kent"
    ,
    
      SuperHeroName: "Batman",
      Name: "Bruce Wyane"
    ,
    
      SuperHeroName: "Iron man",
      Name: "Tony Stark"
    ,
    
      SuperHeroName: "Shazam",
      Name: "Billy Batson"
    
  ];
);

【问题讨论】：

@georgeawg 在 html 中我想打印页眉，然后是 2 个带有数据的 div 元素，然后是页脚，第三个和第四个项目应该用他们自己的页眉和页脚打印。这就是您在带有 4 个数据元素的小提琴输出中看到的内容，我正试图创建一个这样的输出，但是当我将数据元素计数更改为 3 或 1 时，我得到了奇怪的行为。所以我想知道是否有更好的方法来做到这一点，或者我该如何纠正我到目前为止所做的事情

【参考方案1】：

您可以使用$index 属性代替您自己的计数器。这个特殊属性暴露在每个 ng-repeat 模板实例的本地范围内。它是针对重复元素的数字迭代器偏移量。

【参考方案2】：

我想打印页眉，然后是 2 个带有数据的 div 元素，然后是页脚，第三个和第四个项目应该用它们自己的页眉和页脚打印。

使用$index 特殊属性：

<div id="page-main-body">
  <div id="container" ng-repeat="hero in heroModel">
    <div id="page-header" ng-hide="$index === 1">
      I am header
    </div>

    <div id="page-body">
      <p>Name:  hero.Name </p>
      <p>Super hero identity:  hero.SuperHeroName </p>
    </div>

    <div id="page-footer" ng-hide="$index === 0">
      I am footer
    </div>
    ̶̶̶ ̶i̶n̶c̶r̶e̶m̶e̶n̶t̶H̶e̶r̶o̶C̶o̶u̶n̶t̶e̶r̶(̶)̶ ̶̶̶ ̶̶̶ ̶r̶e̶s̶e̶t̶H̶e̶r̶o̶C̶o̶u̶n̶t̶e̶r̶(̶)̶ ̶̶̶
  </div>
</div>

$index 特殊属性在每个 ng-repeat 模板实例的本地范围内公开。它是重复元素(0..length-1)的数字迭代器偏移量。

有关详细信息，请参阅

AngularJS ng-repeat Directive API Reference - Overview

【讨论】：

我没有使用 $index，但最终使用了您共享的文档中的 $odd 和 $even，感谢您为我指明正确的方向。