1

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

然而，柜台工作，但背景永远不会改变。我的代码有什么问题？

顺便说一句，另外两个问题：

  1. 警报对话框不会显示，即使在按钮的 ng-click 事件中调用它也是如此。为什么？
  2. '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>
4

1 回答 1

2

使用scope.$watch()而不是隔离使用语法attrs.$observe()的范围变量。=（将 $observe 与@语法一起使用。）

fiddle

在 ng-click() 内部，每个函数都在 $scope 上被调用，所以 alert() 变成了 $scope.alert() 没有定义。（感谢院长的解释。）

Angular 不使用eval，所以像这样的东西count++不起作用。有关更多信息，请参阅布兰登的答案。

于 2013-08-31T15:13:26.897 回答