Question

我有一个简单的Angular指令，在单击时为元素添加一个CSS类：

.directive("addClass", function () {
    return {
        scope: {
            name: "=addClass"
        },
        link: function (scope, element, attributes) {

            element.on("click", function () {
                element.addClass(scope.name);
                console.log("Element activated");
            });

            element.on("mouseleave", function () {
                element.removeClass(scope.name);
                console.log("Element deactivated");
            });
        }
    }
});

我在我的链接上使用它：

<a href="" add-class="class-name">...</a>

但是当我点击我的链接时，我的事件处理程序会执行，尽管scope.name是undefined。我可以使用attributes读取属性值，但是这会将属性值分配给范围属性，如Angular Directives API中所述。

我做错了什么？

Answer 1

将=addClass替换为@addClass，或者，如果您不需要隔离范围，只需从attribute对象中读取类名：

element.on("click", function() {
    element.addClass(attributes.addClass);
    ...
});

=在你的情况下不起作用的原因是它期望一个属性所以可以建立一个双向绑定并且你提供一个静态字符串（我假设你是从{{ 1}}不是有效的属性名称）。

Answer 2

尝试<a href="" add-class="'class-name'">...</a>，请注意单引号'class-name'

Angular指令不读取属性

2 个答案: