AngularJS自定义指令中elem与elem[0]的区别是什么？

嘿，这个问题我当初刚上手AngularJS写自定义指令的时候也踩过一模一样的坑！让我给你掰扯清楚两者的核心区别：

1. 本质不同 #

• elem 是AngularJS内置的jqLite对象：可以把它看作jQuery的轻量精简版，只实现了jQuery的部分常用方法（比如bind()、addClass()、append()这些），并不是所有原生DOM操作都封装在内。
• elem[0] 是原生DOM元素节点：当你通过[0]索引取值时，相当于从jqLite集合中取出了对应的原生DOM元素，它拥有所有浏览器原生支持的DOM API方法。

2. 结合你的例子解释 #

• 为什么 elem.bind('keydown', someFunction(){}) 能正常运行？
  因为bind()是jqLite明确封装的方法之一，直接调用jqLite对象的这个方法完全没问题，AngularJS会帮你处理底层的事件绑定逻辑。

• 为什么 elem.focus() 失效，但 elem[0].focus() 可以？
  原因很简单：jqLite并没有封装focus()这个方法！当你直接调用elem.focus()时，jqLite对象上找不到这个方法，自然就执行失败导致指令失效。而elem[0].focus()是直接调用原生DOM元素的focus()方法，这是浏览器原生支持的API，所以能正常让元素获得焦点。

小补充 #

如果你的项目中引入了完整的jQuery库，那么elem会自动变成完整的jQuery对象，这时候elem.focus()也能生效——因为jQuery封装了focus()方法。但如果只用AngularJS自带的jqLite，就必须通过elem[0]获取原生DOM元素来调用这类未被jqLite封装的原生方法。

内容的提问来源于stack exchange，提问作者Mr.Benson