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

Question

我正在尝试使用 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() iterations reached. Aborting! Watchers fired in the last 5 iterations:

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

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

我也阅读了 angular documentation for this error 但似乎我的模型也保持不变并且没有任何变化，唯一变化的变量是 counter 的 $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"
    }
  ];
});

Answer 1

i want to print the header and then 2 div elements with data and then the footer, the third and fourth item should be printed with their own header and footer.

使用 $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

Answer 2

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

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

Increment value of scope counter by 1 gives 10 $digest() iterations reached. Aborting error message

javascript

html

angularjs

angularjs-scope