自定义指令中的ng-class不会观察更新

Question

我正在尝试创建一个像这样使用的指令:

<amount value="myValue" neg-class="negative" />

myValue范围值(应该是数字) negative只是一个css类的名称.

该指令背后的想法是,我不想向用户显示货币,并且当绑定的数量为负时,negClass get应用于呈现的元素.

我遇到的问题是当更改negClass时,更新不会生效.但我确实看到了DOM中的变化.

这是我的指令定义:

myModule.directive('amount', function () {
    return {
        restrict: 'E',
        replace: true,
        template: '<span ng-class="{ {{negClass}}: value < 0 }">{{value | currency}}</span>',
        scope: {
            value: "=",
            negClass: "@",
        }

    };
});

这是一个演示问题的测试工具:https://dl.dropboxusercontent.com/u/1563210/amtdirtest.html

Answer 1

大多数角度指令倾向于以这种方式工作.除非文档特别提到支持{{...}}输入的插值(),否则不依赖于它更安全,特别是在输入是=而不是@绑定的情况下.

在这种情况下ngClass,属性的作用类似于a = binding,并且没有提及插值.

该指令实际发生的是该属性仅在链接阶段被观察到,并且属性中的实际文本永远不会被再次查看.因此,当属性继续变化时,从未见过变化.

到查看属性时ngClass,它看起来像

{ n: value < 0 }

仍然根据value范围内的当前值进行评估,但表达式本身永远不会再次更改.

你正在尝试做的事情的安全方法是创建一个不使用插值的对象,或者只是有一个函数返回哪个类是活动的...像下面这样的东西应该工作:

myModule.directive('amount', function () {
    return {
        restrict: 'E',
        replace: true,
        template: '<span ng-class="getActiveClass()">{{value | currency}}</span>',
        scope: {
            value: "=",
            negClass: "@",
        },
        link: function(scope, element, attrs) {
            scope.getActiveClass = function() {
                if(scope.value < 0)
                    return scope.negClass;
            }
        }

    };
});