Увеличение значения счетчика области на 1 дает 10 $ достигнутых итераций digest (). Отмена сообщения об ошибке - PullRequest
Новая
       28

Увеличение значения счетчика области на 1 дает 10 $ достигнутых итераций digest (). Отмена сообщения об ошибке

0 голосов
/ 22 июня 2019

Я пытаюсь работать с angularjs , и мне дано JSFiddle за то, что я пытаюсь сделать 

<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 () достигнуты итерации.Aborting!Наблюдатели сработали за последние 5 итераций:

Так что я думаю, это потому, что я обновляю переменную $ scope и на основе значения переменной я рисую свой верхний и нижний колонтитулы.

Все работает нормально, если моя модель данных содержит 4 или 6 элементов, но если я изменяю количество элементов с четного (2,4) на нечетное (1,3), я получаю $digest error

Я также прочитал документацию angular для этой ошибки , но похоже, что моя модель тоже остается прежней и ничего не меняется, единственной изменяемой переменной является переменная $ scope счетчика, и я знаю, что это может вызвать изменение вцикл дайджеста, но как мне его кешировать или использовать другую технику, чтобы добиться того, что я пытаюсь сделать здесь

Я пробовал пару предыдущих стековых ссылок , но не смог найти правильное направлениеИсходя из этого, я не уверен, что для такой простой вещи я должен использовать service или $rootScope, может быть, есть лучший способ сделать это.

Ниже приведен пример того, как мой код выглядитКак будто вы также можете посмотреть на скрипку и сообщить мне, что я здесь делаю не так 

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"
    }
  ];
});

Ответы [ 2 ]

0 голосов
/ 22 июня 2019

Вы можете использовать свойство $index вместо собственного счетчика.Это специальное свойство доступно в локальной области действия каждого экземпляра шаблона ng-repeat.Это смещение числового итератора по отношению к повторяющемуся элементу.

0 голосов
/ 22 июня 2019

Я хочу напечатать верхний и нижний колонтитулы с данными, а затем нижний, третий и четвертый элементы должны быть напечатаны с собственным верхним и нижним колонтитулом.

Используйте$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).

Для получения дополнительной информации см.

...