10 $digest() iterations reached when get options from service by method!

[sszdh]

Hi,
I have a constant service in my app to store some global configs and options.

(function() {

    'use strict';

    angular.module('App.Core')

        .factory('Constants', ['$rootScope', function($rootScope) {

            return {
                getUiSortableOptions: function() {
                    return {
                        axis: "y",
                        handle: ".handle",
                        items: "> .movable",
                        containment: 'parent',
                        revert: 50,
                        tolerance: 'pointer',
                        opacity: 0.8,
                        cursor: 'move'
                    };
                }
            };
        }])
})();

And in my CoreCtrl I register a global scope's variable for access in view:

(function() {

    'use strict';

    angular.module('App.Core')

    /**
     * Main site controller
     */
        .controller('CoreCtrl', [ '$scope', 'Constants', function ( $scope, Constants) {
            $scope.constants = Constants;
        }])
    ;
})();

View:

<div ui-sortable="constants.getUiSortableOptions()">
....
....
</div>

But in console I receive 10 $digest() iterations reached error:

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [[{"msg":"fn: regularInterceptedExpression","newVal":{"axis":"y","handle":".handle","items":"> .movable","containment":"parent","revert":50,"placeholder":"ui yellow message","tolerance":"pointer","opacity":0.8,"cursor":"move"},"oldVal":{"axis":"y","handle":".handle","items":"> .movable","containment":"parent","revert":50,"placeholder":"ui yellow message","tolerance":"pointer","opacity":0.8,"cursor":"move"}}],[{"msg":"fn: regularInterceptedExpression","newVal":{"axis":"y","handle":".handle","items":"> .movable","containment":"parent","revert":50,"placeholder":"ui yellow message","tolerance":"pointer","opacity":0.8,"cursor":"move"},"oldVal":"..."}],[{"msg":"fn: regularInterceptedExpression","newVal":{"axis":"y","handle":".handle","items":"> .movable","containment":"parent","revert":50,"placeholder":"ui yellow message","tolerance":"pointer","opacity":0.8,"cursor":"move"},"oldVal":"..."}],[{"msg":"fn: regularInterceptedExpression","newVal":{"axis":"y","handle":".handle","items":"> .movable","containment":"parent","revert":50,"placeholder":"ui yellow message","tolerance":"pointer","opacity":0.8,"cursor":"move"},"oldVal":"..."}],[{"msg":"fn: regularInterceptedExpression","newVal":{"axis":"y","handle":".handle","items":"> .movable","containment":"parent","revert":50,"placeholder":"ui yellow message","tolerance":"pointer","opacity":0.8,"cursor":"move"},"oldVal":"..."}]]

So when I change CoreCtrl & View as follow, everything works perfectly!

$scope.sortableOptions = Constants.getUiSortableOptions();

<div ui-sortable="sortableOptions">
....
....
</div>

Demo

Cheers

[thgreasi]

Nice catch 👍

[iamawebgeek]

+1. any solutions for the problem?

[tomasz-szymanek]

+1 same here

[thgreasi]

I've started thinking that this can't be fixed from our side of the code.
Declaring a method call in the view, is going to call it on every $digest loop, probably returning a new object (reference) every time, except if your method does some internal caching of the returned object.
Even if the properties of the object returned are equal, assigning a new object on a directive's property is going to fire all $watchers of that property, leading to a new $digest loop (that's by angular's design).

I'm thinking of marking this as a wontfix/invalid, If no one can suggest an alternative approach/workaround or at least can provide a counter-example that such a thing is done in an other directive.

I think that the proper solution is hold the options on your $scope, exactly the way that @sszdh suggested earlier:

$scope.sortableOptions = Constants.getUiSortableOptions();

<div ui-sortable="sortableOptions">
....
....
</div>

PS: There is also the angular perf tip that says that you should avoid method calls in the view whenever possible, since they run on every $digest loop.

[thgreasi]

Here is a demo where a new instance is not created on every call. You can probably have some logic too in your method, so that you can actually change it when needed.

[thgreasi]

Closing this for now since I don't think that it can be solved in the directive and is a result of the angular design.
I'm still open to suggestions. If anyone thinks that it can be solved, please re-open this issue or open a PR.