I'm using AngularJS and I have a little question here. I just made my httpInterceptor service to display a spinner on a webpage when performing ajaxRequests but it is getting me this error when I run it within an iFrame using IE; it does not happen using Chrome, Firefox. Here is the code for the interceptor:
.factory('httpInterceptor', function ($q, $rootScope) {
return function (promise) {
$rootScope.$$childHead.spinner += 1;
return promise.then(function (response) {
$rootScope.$$childHead.spinner -= 1;
return response;
}, function (response) {
$rootScope.$$childHead.spinner -= 1;
return $q.reject(response);
});
};
}).config(function ($httpProvider) {
$httpProvider.responseInterceptors.push('httpInterceptor');
var spinnerFunction = function (data, headersGetter) {
return data;
};
$httpProvider.defaults.transformRequest.push(spinnerFunction);
});
For some reason it is displaying me this error when I run my appication inside an iFrame:
Error: 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations:
I was wondering if this is caused because of running it within iFrame or if it is because of the promise object.
I've seen this error when using ng-repeat but I haven't found a reason of this. If you have had a similar problem please give me some advices. Thanks!
It looks like you are dipping into angular when referencing $rootScope.$$childHead. If this is an internal construct then this is most likely your problem. You seem to be racing with angular to update same field. See this solution