javascript - addEventListener 到 AngularJS 中的简单指令示例

Question

试图获得 this非常基本的指令示例。根据一些调查，“elem”似乎是 HTMLHeadingElement(继承自 Element)的对象。不确定为什么 elem.addEventListener 不起作用。此外，elem.bind 似乎有效，但这不是 global 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');
    });*/
}

Answer 1

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

DOM 节点是 elem[0]

可以使用angular.element API这是 jQuery 方法的子集。

对于点击监听器将是:

elem.bind('click',handlerfunc);

This isn't the global bind()

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

bind() (deprecated, use on()) - Does not support namespaces, selectors or eventData