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');
    });*/
}

Answer 1

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

DOM节点是 elem[0]

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

对于点击监听器，将是：

elem.bind('click',handlerfunc);

这不是全局bind（）

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

bind()（不建议使用，请使用on()）-不支持名称空间，选择器或eventData

Answer 2

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

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

编辑

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

像这样的东西：

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

并在模板中：

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

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

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