window.location.href/reload causing AngularJS [$rootScope:infdig] 10 $digest() iterations reached

2
votes

I know this is causing the problem, as if I were to change window.location.href/reload to $location.path(), it works just fine. Now, I do not see any performance errors when running the code (usability) Just kidding, this breaks the app in IE but works in Chrome when using window.

What I am doing is forcing some updates to reflect on the site when a user logs in/out, and to do that I need to refresh the page once I change their route. Using $location.path and $state.go change my URL but do not reload/refresh the page to reflect the site updates.

Is there any way for AngularJS to natively redirect and reload a route/page without getting this loop warning/error? Or is there a way to still use the window.location.href/reload and now have AngularJS freak out?

The error

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!

Watchers fired in the last 5 iterations: [["fn: function $locationWatch() {\n var oldUrl = $browser.url();\n var currentReplace = $location.$$replace;\n\n if (!changeCounter || oldUrl != $location.absUrl()) {\n changeCounter++;\n
$rootScope.$evalAsync(function() {\n if ($rootScope.$broadcast('$locationChangeStart', $location.absUrl(), oldUrl).\n defaultPrevented) {\n
$location.$$parse(oldUrl);\n } else {\n
$browser.url($location.absUrl(), currentReplace);\n
afterLocationChange(oldUrl);\n }\n });\n }\n
$location.$$replace = false;\n\n return changeCounter;\n }; newVal: 8; oldVal: 7","fn: function(context) {\n try {\n
for(var i = 0, ii = length, part; i

And then there is a paragraph-long error below those starting with:

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

2
javascriptangularjswindow.location

2 Answers

2
votes

You may try replacing the href inside a setTimeout. That helped in my case.

$setTimeout(function() { $window.location.href = newUrl; }, 500);
0
votes

$state actually has a reload() function to do exactly this:

$state.reload();

You can read about it in the ui-router $state docs.

If you need to redirect as well, you can force a reload on state transition by passing the reload: true option to $state.go():

$state.go('stateName', {}, {reload: true});