自定义指令中的 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 是一个范围值(应该是一个数字)negative 只是一个 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

推荐答案

大多数 angular 指令倾向于以这种方式工作.除非文档特别提到支持输入的插值({{...}})，否则不依赖它会更安全，尤其是当输入是 = 而不是@ 绑定.

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看到该属性时，它看起来像

By the time the attribute is seen by ngClass, it looks something like

{ n: value < 0 }

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

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屋！