Angular JS Error: 10 $digest() iterations reached. Aborting

Question

I'm using angularjs-google-maps and am getting an error when trying to loop over my customers as markers on a map.

<map>
  <custom-marker ng-repeat="cust in customers" position="[ {{ cust.lat }}, {{ cust.lon }} ]">
    <div class="{{ cust.category }}">{{ cust.name }}</div>
  </custom-marker>
</map>

The error seems to have something to do with cust.category and cust.name, as when I remove these they work fine.

This is the first couple lines of the error message I'm getting:

Watchers fired in the last 5 iterations: [["[ cust.category , cust.name ]; newVal:
[\"pro\",\"Fred\"]; oldVal: [\"pro\",\"Fred\"]","fn: function (context) {\n          
try {\n for(var i = 0, ii = length, part; i<ii; i++) {\n

Full error message here.

Any help with this is appreciated. Thanks in advance!

UPDATE

Code for the custom-marker directive that's part of angular-google-maps is here.

@realpha, could you please show your data? What is the data type of `cust.category`? — Abhilash Augustine, Nov 10 '15 at 12:02
@AbhilashPA `cust.category` is a string, as is `cust.name`. Both exist inside an object. — realph, Nov 11 '15 at 00:32
Looks like the watcher is on every variable used within the custom-marker directive, so each variable as it gets set would grow something crazy especially on initialization. You may want to add a timeout to delay the setup till initialization completes, see if that keeps the watcher happy. — Vince, Nov 13 '15 at 15:07
I believe, that `scope.$watch('[' + varsToWatch.join(',') + ']'` is an issue. Need set third `$watch` parameter to `true`, for compare recreated arrays. — vp_arth, Nov 13 '15 at 15:16

score 1 · Answer 1 · answered Nov 08 '15 at 01:16

1

It seems like the digest cycle is stuck in a loop. Angular has a digest cycle where they watch models (whatever is on $scope) and apply changes to the views if the models change. If in a digest cycle you're executing some function that changes a value again, you're triggering another digest cycle which triggers that same function again, changes a value on the model and triggers an infinite loop of digest cycles.

That said, you might want to add the code for your customMarker directive for answers to be more precise.

answered Nov 08 '15 at 01:16

Timur Ridjanovic

1,002
1
12
18

Hmm. Not sure why that would be happening. I've updated my question with a link to the custom-marker directive code from the angular-google-maps repo. – realph Nov 08 '15 at 01:21
Per the docs, this appears to be the correct answer to the question of 'why is this error being thrown?' https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$digest – Bobby Russell Nov 13 '15 at 19:45

score 0 · Answer 2 · answered Nov 13 '15 at 14:11

0

why are you binding class="{{ cust.category }}",try using ng-class.Also can you use track by $index in ng-repeat.I was getting this error when running my ionic app on ios9.They released a patch to fix this.

answered Nov 13 '15 at 14:11

Ali Sadiq

900
6
11

vp_arth · Answer 3 · 2015-11-13T15:20:03.807

Code like this:

scope.$watch('[' + varsToWatch.join(',') + ']'...

looks like "[obj1.prop, obj2.prop]" after concatenation.
Expressions, like this parsed by $parse and cause to evaluate self to new instance of array every iteration, even if nothing changed inside.

You should interpolate/parse it before call $watch and write a condition, which changes only than related data really was changed.

$watch is a function(watchExp, listener, objectEquality, prettyPrintExpression)
You can try to use third parameter(objectEquality) to compare arrays by value, but not by reference equality.

@param {boolean=} objectEquality Compare for object equality using {@link angular.equals} instead of comparing for reference equality.

Angular JS Error: 10 $digest() iterations reached. Aborting

3 Answers3