JavaScript runtime error:[$rootScope:infdig] 10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations: []

Question

Hi I have the following rute

 options.assetIds = options.assetIds.join(',');
 return $state.go(parentState + '.add-to-collection',
                options,
                null,
                {
                    title: 'Add to collection',
                    backStack: 'collections',
                    sideStack: true //use a different sidestack!
                })
                .then(app.focus);
        };

Everything seems to work fine until the option.assetIds is to big , like if exceeds 400-500 elements it shows me following exception :

Exception was thrown at line 14682, column 13 in ms-appx://showpadnv.showpad/public/vendor/angular/angular-execunsafe-1.3.20.js
0x800a139e - JavaScript runtime error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []

Probably caused by the target URL becoming too large due to the amount of assets ids in the query parameters. Can anyone help me to figure out what is happening? Thanks!!!

I don't know Angular, but if your URL becomes too large due to too many querystring params, you should use POST instead. — Teejay, Jan 22 '18 at 08:49
It is better to pass these complicated data via service not via url parameters. — Slava Utesinov, Jan 22 '18 at 09:04

score 0 · Answer 1 · answered Jan 22 '18 at 10:24

I'm outside the AngularJS development some time but as I remember struggling with $digest / Watchers related errors, the problem was usually caused by Angular automatically (by it's internal design) adding watchers on stuff I wouldn't expect it to, causing infinite digest cycles (the infdig error) when the stuff was more complex or was returning different results on each call - would have to know more about the context but I'd guess in your case it's watching either options.assetIds or the result of $state.go; in either case, you'd probably help it by leaving out the assetIds from the options and storing it into a service/factory instead, then withdrawing it from the service inside the add-to-collection controller like so:

$scope.$on('$viewContentLoaded', function () {
  assetIds = $carriageService.getAssetIds();
});

(The event name would probably be '$stateChangeSuccess' if you're using ui-router.)

See this SO answer for additional info on the infdig error.

JavaScript runtime error:[$rootScope:infdig] 10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations: []

1 Answers1