angularjs ng-class method is getting invoked multiple times

Question

In this example, i got 2 ng-class, each calling different controller method, for some reason each method get called 3 times, Any idea? Possible bug?

var navList = angular.module('navList', []);

navList.controller('navCtrl', ['$scope', '$location', function ($scope, $location) {
    $scope.firstClass = function () {
        console.log('firstClass');
        return 'label label-success' ;
    };     
    $scope.secondClass = function () {
        console.log('secondClass');
        return 'label' ;
    };     

}]);

http://jsfiddle.net/uDPHL/72/

Thanks

If your goal is to have conditional classes for your labels, have a look at this SO post: stackoverflow.com/a/15664427/1036025 — jpmorin
– jpmorin, Commented Apr 11, 2013 at 17:01

Mark Rajcok · Accepted Answer · 2013-04-11 15:25:29Z

7

It is not a bug. When Angular compiles something like ng-class="firstClass()", it sets up a $watch for it. A digest loop may evaluate each $watch multiple times:

Angular enters the $digest loop. The loop is made up of two smaller loops which process $evalAsync queue and the $watch list. The $digest loop keeps iterating until the model stabilizes, which means that the $evalAsync queue is empty and the $watch list does not detect any changes. -- Overview doc

Also

After a watcher is registered with the scope, the listener fn is called asynchronously (via $evalAsync) to initialize the watcher. In rare cases, this is undesirable because the listener is called when the result of watchExpression didn't change. -- $watch docs

So, at least two times is expected.

answered Apr 11, 2013 at 15:25

Mark Rajcok

365k114 gold badges501 silver badges494 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angularjs ng-class method is getting invoked multiple times

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related