Question

我有一个接收字符串的指令，我希望该指令然后修改并添加为属性的属性。

HTML

<div directive ng-class="" otherAttribute="hello"></div>

JS

.directive('directive', function () {

return {

    link: function (scope, elem, attrs) {

            var classList = "{active: attrs.otherAttribute == 'hello'}";

            attrs.ngClass = classList;

            console.log(attrs);

        }

    }

})

确实似乎将属性添加到attrs对象的class属性中：

console.log(attrs);

$$observers: Object
$attr: Object
ngClass: "{active: attrs.otherAttribute == 'hello'}"
otherAttribute: "hello"
__proto__: Object

但是DOM没有更新。我已经尝试了$compile，但这并没有更新DOM上的class属性。

我错过了什么？非常感谢！

Answer 1

您可以使用directive元素修改css类。

代码的工作示例：http://jsfiddle.net/egrendon/vvnu5yLx/1/

app.directive('directive', function () {
    return {
        link: function (scope, element, attrs) {
            scope.classList += "class1 class2";
            element.addClass(scope.classList);
            console.log(attrs);
        }
    }
});

Answer 2

您可以使用插值和参考指令范围

 <div directive class="class1 {{classList}}" otherAttribute="hello"></div>

link: function (scope, elem, attrs) {
        scope.classList = "class2";
}

请注意，在您的代码中存在错误，您使用scope.classList运算符引用了未定义的+=，从而导致undefinedclass1 class2字面值。我想这可能是一个错字例子......

AngularJS动态指令链接函数中的属性更新

2 个答案: