AngularJs - Error: 10 $digest() iterations reached. Aborting

Question

I am trying to create a Metro Tile type grid with Angular, to achieve this i want each of the tiles to be a different colour. So my plan of action was to create a function that would randomly pick a colour inside a loop (using ng-repeat). Here is what i have so far....

<div class={{RandomColourClass()}} ng-repeat="stockRecord in GridStockRecords | filter:searchText">
  <div  >
    <h6>{{stockRecord.ProductGroupName}}</h6>
  </div>
</div>

So as you can see i am setting the class name with a function called RandomColourClass, Here is the JS bits

$scope.TileColours = [{colour:'thumbnail tile tile-blue'},{colour:'thumbnail tile tile-green'},{colour:'thumbnail tile tile-red'}];

$scope.RandomColourClass = function(){
  var randomColour = $scope.TileColours[Math.floor(Math.random() * $scope.TileColours.length)];
  return randomColour.colour.toString();
};

This all works fine and the tiles are of different colours but i keep getting the following error

Error: 10 $digest() iterations reached. Aborting!".

I've had a look at other posts around the issue but i can't figure out what i need to change to get it working!? Any help or direction would be greatly appreciated :)

post `GridStockRecords` please – Maxim Shoustin Oct 30 '13 at 20:48 — Maxim Shoustin, Oct 30 '13 at 20:48

John Ledbetter · Accepted Answer · 2013-10-30T21:14:08.617

Angular performs a digest function to update the DOM when your data changes.

During the digest, it recomputes all the values you have bound in the DOM, in this case {{RandomColorClass()}}. If any of them change, it again performs a digest cycle (since some variables may depend on the value of of the changed variable, for example).

It does this repeatedly until two digests in a row result in the same values -- i.e, nothing has changed.

What's happening is that when a digest occurs, your RandomColorClass() function is being called and returns a different value. This triggers an additional digest, where RandomColorClass() again returns a different value, which triggers another digest...

Can you see where this is going? You shouldn't be generating random values in this manner -- instead, generate them in your scope and persist them.

One approach might be, in your scope:

function randomColourClass() { /* ... */ };

$scope.GridStockRecords.forEach(function(record) {
  record.colorClass = randomColourClass(); 
});

and HTML:

    <div ng-repeat="stockRecord in GridStockRecords | filter:searchText"
         ng-class="stockRecord.colorClass">
      <div>
        <h6>{{stockRecord.ProductGroupName}}</h6>
      </div>
    </div>

Makes total sense! Thanks for the help! – user2859298 Oct 31 '13 at 13:03 — user2859298, Oct 31 '13 at 13:03
exactly what happened to me. Thanks a lot! – zeroliu Jul 31 '14 at 22:24 — zeroliu, Jul 31 '14 at 22:24

score 5 · Answer 2 · answered Jan 12 '14 at 20:25

5

I had the same problem in IE10 turns ut that the problem was that I was redirecting using window.location.

window.location = "#route/yada";

Changed the code to

$location.path("/route/yada);

And that solved my issues. =D

answered Jan 12 '14 at 20:25

Markus Knappen Johansson

1,461
17
19

1

Somthing strange with these methods of redirecting: $window.location.href can rise `$digest() iterations reached. Aborting error`, $location.path() sometimes doesn't work. I solved with $location.url("route/yada"); – Chaki_Black Aug 06 '15 at 15:44

score 1 · Answer 3 · answered Dec 05 '13 at 13:27

Answer unrelated to this particular question, but I'm adding it here because it's on the Google front page when you search for the error message and it took me a bit until I figured it out:

I had something like this in my view:

<custom-tag data="[1,2,3]"/>

And the controller of the custom tag had a watcher set up on $scope.data. This caused AngularJS to barf because every time it re-checked the value of data it got a new object from the view (remember, the array is an object) so it never finished digesting it properly.

score 0 · Answer 4 · answered Sep 23 '15 at 18:31

0

I encountered this error when I mistyped ng-class="submit()" instead of ng-click="submit()". I can't imagine anyone else making such a silly error, but for the record, this is another way to create 10 $digest() iterations reached aborting!

answered Sep 23 '15 at 18:31

claireablani

7,804
5
16
19

AngularJs - Error: 10 $digest() iterations reached. Aborting

4 Answers4

Linked