角指令不读属性

我有一个简单的角度指令被点击时，增加了一个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中所述。

我在做什么错？

来源

2014-01-22 Robert Koritnik

更好地使用模板和'NG-click'然后处理'click'事件。否则，您将需要通过调用'scope。$ apply'让Angular知道（如果您想操纵范围）您正在侦听DOM。 –

@DavinTryon我不认为'$ apply（）'是必需的，因为他直接处理元素（不包含摘要循环）。此外，他的指令似乎与其他元素一起使用，所以不能使用自定义模板。 –

@MichaelBenford：谢谢。你写的东西绝对正确。 –

更换=addClass与@addClass，或者，如果你不需要一个分离的范围，只读过类名称权出attribute对象：

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

原因=不工作，你的情况是，它期望一个属性，所以双向绑定可以建立，你提供了一个静态字符串（我假设你是因为class-name不是一个有效的属性名称）。

来源

2014-01-22 17:45:11

它的工作原理，但你可以请我指出，谈论这些的Angular文档？当你说：* ...它期望一个属性... *你指的是哪个属性？ '$ scope'？ –

@RobertKoritnik当然。他们已经将指令的开发指南的一些部分移动到'$ compile'服务[page]（http://code.angularjs.org/1.2.9/docs/api/ng.$compile）。寻找'isolaScope'。 –

@RobertKoritnik是的。如果使用'= addClass'，那么在包含该指令的范围内应该有一个名为'addClass'的属性。 –

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

来源

2014-01-22 17:54:28 TruongSinh

角指令不读属性

回答

相关问题