addEventListener 到 AngularJS 中的简单指令示例

Question

试图让 这个 非常基本的指令示例起作用。从一些调查来看，“elem”似乎是 HTMLHeadingElement （继承自 Element）的一个对象。不确定为什么 elem.addEventListener 不起作用。另外， elem.bind 似乎可以工作，但这不是 全局绑定，对吗？

此外，如果有人可以触及文档对象模型 (DOM) 级别 2 HTML 规范与文档对象模型 (DOM) 级别 1 规范，那就太好了。碰巧第一次遇到这个，这是DOM元素的新对象层次结构吗？

以下是我的指令的链接功能：-

 link: function(scope, elem, attrs) {
  // elem will be HTMLHeadingElement object!
  scope.name = 'New Micheal!';
  elem.addEventListener('click', function(e) {
      elem.css('background-color', 'red');
    })
    /*elem.bind('mouseover', function(e) {
      elem.css('background-color', 'red');
    });
    elem.bind('mouseout', function(e) {
      elem.css('background-color', 'white');
    });*/
}

原文由 noi.m 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

elem 是一个 jquery（或 jqlite）包装元素。它不是 HTMLHeadingElement 的实例（尽管可以访问底层包装实例）。

要添加点击处理程序，您应该使用： elem.click(function(e) { ... }); 而不是 addEventListener 。

---

编辑

上述方法仅在您正确使用 jquery（而非 jqlite）时才有效。但是，一般来说，您不应该通过 JS 添加处理程序。有角度的方法是在模板中执行此操作。

是这样的：

 scope.colorHandler = function() {
  elem.css('background-color', 'red');
});

在模板中：

 template: '<div ng-click="name = \'colorHandler()\'"><h3>Hello {{name}}!!</h3></div>',

在此示例中，单击 div 将调用颜色处理程序。

这仍然不是规范的角度，因为您应该通过 css 类和 ng-class 的变化来处理 css 变化，但这越来越接近，我希望它能说明这一点。

原文由 Andrew Eisenberg 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

elem 不是 DOM 元素它是一个 jQlite 对象（angular.element）或一个 jQuery 对象，如果 jQuery 包含在 angular.js 之前的页面中

DOM节点是 elem[0]

可以使用 angular.element API ，它是 jQuery 方法的一个子集。

对于点击监听器将是：

 elem.bind('click',handlerfunc);

这不是全局 bind()

不……它是上述 API 的一部分并且匹配 jQuery bind()

bind() （弃用，使用 on() ） - 不支持命名空间、选择器或事件数据

原文由 charlietfl 发布，翻译遵循 CC BY-SA 3.0 许可协议