Angular 指令不读取属性答案

【问题标题】：Angular directive doesn't read attributeAngular 指令不读取属性
【发布时间】：2014-01-22 17:33:45
【问题描述】：

我有一个简单的 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 中所述。

我做错了什么？

【问题讨论】：

最好使用模板和ng-click，然后直接处理click 事件。否则，您需要通过调用 scope.$apply 让 Angular 知道（如果您想操纵范围）您正在侦听 DOM。
@DavinTryon 我认为这里不需要$apply()，因为他直接处理元素（不涉及摘要循环）。此外，他的指令似乎与另一个元素一起使用，因此无法使用自定义模板。
@MichaelBenford：谢谢。你写的完全正确。
@MichaelBenford 是的，这就是我写“如果你想操纵范围”的原因。

标签： angularjs angularjs-directive

【解决方案1】：

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

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

= 在您的情况下不起作用的原因是它需要一个属性，因此可以建立双向绑定并且您提供的是静态字符串（我假设您是因为 class-name 是'不是一个有效的属性名称）。

【讨论】：

它可以工作，但你能指点我讨论这些的 Angular 文档吗？当您说：...它需要一个属性... 您指的是哪个属性？ $scope?
@RobertKoritnik 当然。他们已将指令的开发指南的某些部分移至$compile 服务page。寻找isolateScope。
@RobertKoritnik 是的。如果您使用=addClass，那么在包含该指令的范围内应该有一个名为addClass 的属性。
从文档看来=addClass 应该是同名元素属性的值。它实际上显示了如何将其注入隔离范围。我不太喜欢 Angular Docs。我认为他们缺乏很多信息。
@RobertKoritnik 真的很抱歉。我最后的评论是完全错误的。 =addClass 意味着应该有一个名为 add-class 的属性，其中包含父范围内的属性名称，以便 Angular 可以将它们绑定在一起。我不知道我为什么这么说。对我生气，而不是对 Angular 文档生气。 :)

【解决方案2】：

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

【讨论】：