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的情况下，该属性的作用类似于 = 绑定，并且没有提及插值。

指令实际发生的是属性为only observed in the linking phase，并且永远不会再查看属性中的实际文本。因此，当属性继续变化时，从未见过变化。

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

    };
});

Answer 2

最初没有注意到css已经在范围内了。

这是一种使用$compile和$watch动态编译元素以监听negClass

中的更改的方法

.directive('amount', function($compile) {
    var template='<span ng-class="{ {{negClass}}: value < 0 }">{{value | currency}}</span>'
    return {
      restrict: 'E',
      replace: true,
      scope: {
        value: "=",
        negClass: "@",
      },
      link:function(scope,elem,attrs){
        scope.$watch('negClass',function(){
          elem.html('').append($compile(template)(scope) )
        })

      }

    };
  });

的 DEMO

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

2 个答案: