自定义指令中的ng-class不会观察更新 [英] ng-class within custom directive not observing updates

问题描述

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

I'm trying to create a directive that's used like this:

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

myValue 是一个范围值（应该是数字）
负数只是一个css类的名称。

myValue is a scope value (should be a number) negative is simply the name of a css class.

指令背后的想法是我不想向用户显示货币，当绑定的金额为负数时，negClass get应用于渲染元素。

The idea behind the directive is that I wan't to show currency to the user and when the amount that's bound is negative, negClass get's applied to the rendered element.

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

The problem I'm having is that when negClass is changed, the update doesn't take effect. I do see the changes in the DOM, though.

这是我的指令定义：

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

Here's a test harness that demonstrates the problem: https://dl.dropboxusercontent.com/u/1563210/amtdirtest.html

推荐答案

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

Most of the angular directives tend to work in this way. Unless the docs specifically mention supporting interpolation ({{...}}) for inputs then it's safer to not rely on it, especially where the input is an = rather than an @ binding.

在 ngClass ，该属性的作用类似于 = 绑定，并且没有提到插值。

In the case of ngClass, the attribute works like a = binding, and there is no mention of interpolation.

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

What actually happens in the directive is that the attribute is only observed in the linking phase and the the actual text in the attribute is never looked at again. So while the attribute continues to change, the changes are never seen.

当 ngClass ，它看起来像

{ n: value < 0 }

仍然根据当前值在范围内，但表达式本身永远不会再次更改。

which is still evaluated based on whatever the current value is in scope, but the expression itself never gets changed again.

执行您尝试的操作的安全方法是创建一个不使用插值的对象，或只是有一个函数，返回哪个类是活动的...像下面这样的东西应该工作：

The safe way to do what you are trying would be to create an object without using interpolation, or to just have a function that returns which class is active...Something like the following should work:

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;
            }
        }

    };
});

这篇关于自定义指令中的ng-class不会观察更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！