Question

我不知道为什么会多次调用它。

<!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/ 打开链接并查看console.log

Answer 1

在摘要周期运行时，您在AngularJS中使用的所有表达式都会被多次评估。这是为脏检查完成的，它验证表达式的当前值是否与最后一个值不同。

这意味着如果在表达式中使用方法，则不能依赖于调用方法的次数。

请参阅“范围生命周期”部分，了解它的发生方式http://docs.angularjs.org/guide/scope

Answer 2

AngularJS编译DOM，因此它可能会在幕后创建div并执行ng-class几次。无论如何，ng-class预计将以另一种方式使用http://docs.angularjs.org/api/ng.directive:ngClass

为什么在角度指令中多次调用ng-class？

2 个答案: