AngularJs - Error: 10 $digest() iterations reached. Aborting
Solution 1
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>
Solution 2
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
Solution 3
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.
user2859298
Updated on July 22, 2022Comments
-
user2859298 almost 2 years
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 :)
-
user2859298 over 10 yearsMakes total sense! Thanks for the help!
-
zeroliu almost 10 yearsexactly what happened to me. Thanks a lot!
-
Chaki_Black almost 9 yearsSomthing 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");