angular-gridster: Infinite digest loop when re-calculating width of widgets container

When using angular-gridster with Angular 1.3.1, i’m frequently getting this error when the grid is displayed the second time:

Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [["fn: function () {\n\t\t\t\t\t\t\tvar _width = parseInt($elem.css('width')) || $elem.prop('offsetWidth');\n\t\t\t\t\t\t\treturn _width;\n\t\t\t\t\t\t}; newVal: 135; oldVal: 163"],["fn: function () {\n\t\t\t\t\t\t\tvar _width = parseInt($elem.css('width')) || $elem.prop('offsetWidth');\n\t\t\t\t\t\t\treturn _width;\n\t\t\t\t\t\t}; newVal: 114; oldVal: 135"],["fn: function () {\n\t\t\t\t\t\t\tvar _width = parseInt($elem.css('width')) || $elem.prop('offsetWidth');\n\t\t\t\t\t\t\treturn _width;\n\t\t\t\t\t\t}; newVal: 100; oldVal: 114"],["fn: function () {\n\t\t\t\t\t\t\tvar _width = parseInt($elem.css('width')) || $elem.prop('offsetWidth');\n\t\t\t\t\t\t\treturn _width;\n\t\t\t\t\t\t}; newVal: 93; oldVal: 100"],["fn: function () {\n\t\t\t\t\t\t\tvar _width = parseInt($elem.css('width')) || $elem.prop('offsetWidth');\n\t\t\t\t\t\t\treturn _width;\n\t\t\t\t\t\t}; newVal: 86; oldVal: 93"]]

As you can see the width is toggled very often between certain values, which causes the digest loop. The cause is on line 622 of gridster-angular which is watching the width and firing resize on change too often.

scope.$watch(function() {
    var _width = parseInt($elem.css('width')) || $elem.prop('offsetWidth');
    return _width;
}, resize);

About this issue

Original URL
State: open
Created 10 years ago
Comments: 20 (7 by maintainers)

Most upvoted comments

I fixed the above problem by using angular.copy instead of push a new widget to the widgets list directly:

Before:

        $scope.addWidget = function (newWidget) {
            $scope.widgets.push(newWidget);
        };

After:

        $scope.addWidget = function (newWidget) {
            var widgetsCopy = angular.copy($scope.widgets);
            widgetsCopy.push(newWidget);
            $scope.widgets =  widgetsCopy;
        };

marianafranco on Jun 8, 2015