Почему ng-класс вызывается несколько раз в директиве angular?

Я не знаю, почему он называется несколько раз.

<!doctype html>
<html ng-app="HelloApp">
<body>
  <test-directive></test-directive>
</body>
</html>

angular.module('HelloApp', [])
.directive('testDirective', function () {
    return {
        restrict: 'E',
        replacement: true,
        template: '<div ng-class="test()">Test Directive</div>',
        link : function (scope, element, attrs) {
            console.log('link');
            var cnt = 0;
            scope.test = function () {
                cnt += 1;
                console.log('test', cnt);
                //element.append('<h6>test' + cnt + '</h6>');
            }
        }
    }
});

результат консоли

link
test 1
test 2
test 3

Вот JSFIDDLE: http://jsfiddle.net/yh9V5/ Откройте ссылку и откройте консоль .log

Ответ 1

Все выражения, которые вы используете в AngularJS, обрабатываются несколько раз, когда цикл дайджеста выполняется. Это делается для грязной проверки, которая проверяет, отличается ли текущее значение выражения от последнего значения.

Это означает, что вы не можете полагаться на то, сколько раз метод вызывается, если он используется в выражении.

См. раздел "Жизненный цикл области", чтобы понять, как это происходит http://docs.angularjs.org/guide/scope

Ответ 2

AngularJS компилирует DOM, чтобы создать div и выполнить ng-class несколько раз за кулисами. В любом случае, ng-class, как ожидается, будет использоваться по-другому http://docs.angularjs.org/api/ng.directive:ngClass