Question

在下面的代码中，我想在我的指令中增加一个计数器，并且还要更改背景颜色。如果计数器是偶数，则背景颜色应为“红色”，否则为“绿色”。

然而，计数器有效，但背景永不改变。我的代码出了什么问题？

BTW，另外两个问题：

警告对话框未显示，即使在按钮的ng-click事件中调用它也是如此。为什么？
'counter ++'似乎不适用于ng-click，它必须是'counter = counter + 1'，它是否正确？

JavaScript的：

    function myDirective(){
        return {
            template: '<div>{{count}}</div>',
            replace: false,
            transclude: false,
            restrict: 'A',
            scope: {count:'='},
            link: function(scope, el, attrs){

                //-------------  Observe 'count'  ----------------
                attrs.$observe('count', function(newVal, oldVal){
                    var bgColor = newVal % 2 == 0 ? 'red' : 'green';
                    angular.element(el).css('background-color', bgColor);

                });
            } 

        };
    };
    angular.module('app', []).directive('myDirective', myDirective);

HTML：

    <body data-ng-app='app' data-ng-init="count=1">
        <button ng-click='alert("aa"); count=count+1; '>Increase</button>
        <div my-directive count='count'>
    </body>

Answer 1

对于使用scope.$watch()语法的隔离范围变量，请使用attrs.$observe()而不是=。（使用带有@语法的$ observe。）

fiddle

在ng-click（）中，每个函数都在$ scope上调用，因此alert（）变为$ scope.alert（），未定义。（感谢Dean获得该解释。）

Angular不使用eval，因此count++之类的内容无效。有关详情，请参阅Brandon's answer。

AngularJS：如何监控指令中的属性？

1 个答案: