CODEWITHSUNDEEP
javascriptangularjsinternet-explorerinternet-explorer-11internet-explorer-10
emersonthis
emersonthis

Reputation: 33368

Angular JS Error: [$rootScope:infdig] in IE 10 and IE 11 only

I'm running Angular JS v1.4.7 and the app completely crashes in Internet Explorer 10 and 11 (we don't support older). When I check the console I see: Error: [$rootScope:infdig] which is somewhat explained here.

It runs perfectly with no errors in other browsers.

After a lot of trial and error I was able to isolate the problem to a single bit of logic in one of the directives, which I've simplified:

tsApp.directive('svgIcon', function($timeout) {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            inlinesvg: '=',
            orientation: '@',
            themeid: '@',
            scale: '@',
            verticalAlign: '@'
        },
        template: '<span ng-bind-html="inlinesvg | unsafe"></span>',
        link: function(scope, element, attrs) {

            /* @TODO Synchronize with similar function in Mode Icon directive */
            /* Function updates inlinesvg to avoid flicker */
            scope.setLogoDimensions = function() {
                /* Obtain svg attributes */
                var svg = angular.element(scope.inlinesvg);
                /* ... */
                /* Reinsert raw svg with jQuery conversion */
                scope.inlinesvg = $('<div>').append(svg.clone()).html();
            };

            /* Resize if new inlinesvg */
            scope.$watch('inlinesvg', function() {
                scope.setLogoDimensions();
            });
        }
    };
});

I can turn the problem on/off by commenting out the final line of setLogoDimensions: scope.inlinesvg = $('<div>').append(svg.clone()).html();

Upvotes: 3

Views: 886

Answers (1)

Vincent De La Tour
Vincent De La Tour

Reputation: 11

From Angular doc

This error occurs when the application's model becomes unstable and each $digest cycle triggers a state change and subsequent $digest cycle. Angular detects this situation and prevents an infinite loop from causing the browser to become unresponsive. For example, the situation can occur by setting up a watch on a path and subsequently updating the same path when the value changes.

$scope.$watch('foo', function() { $scope.foo = $scope.foo + 1; });

Here, you are modifiying your inlinesvg model inside your scope.$watch of inlinesvg (threw your setLogoDimensions() function). You can't do that

Upvotes: 1

Related Questions