angular.element()将DOM元素或者HTML字符串封装为一个jQuery元素。

格式：angular.element(element);（括号中的element为包装成jquery对象的html字符串或者dom元素）

$document和angular.element(document)是一样的，是一个整体的dom结构树，包含jqlite的所有方法，另外$document[0]和原生JS的document等效（使用时不要忘记注入$document哦）

如果jQuery可用，angular.element就相当于jQuery的$。如果不可用，angular.element代表angular内置的jQuery的子集，称之为jQuery Lite或jqlite。

要使用jQuery，应该确保其在angular.js之前加载。你也可以使用ngjq指令指定jqlite应该采用jQuery，或者指定一个特定的版本号当页面引用了多个版本的jQuery的时候。

Note

• 不建议在controller里操作Dom，如果需要对Dom进行操作应当在directive中进行，像我们在Ng开发中封装一些jQuery插件使用时，也是通过指令来的。
• angular.element不会通过标签名称和CSS选择器找到元素，如果有需要，可以使用angular.element(document).find(...)或者$document.find()，也可以使用标准的DOM API，比如document.querySelectorAll(),document.querySelector(),document.getElementById()等

Angular的jqLite

jqlite只提供以下的jQuery方法：

• addClass() - 不支持将函数作为第一参数
• after()
• append()
• attr() - 不支持函数作为参数
• bind() (不建议使用，应使用on()) - 不支持命名空间，选择器或事件数据
• children() - 不支持选择器
• clone()
• contents()
• css() - 只检索内联样式且不会调用getComputedStyle()；As a setter, 不会将数字转换为字符串或者追加“px”，也不会自动给属性补齐前缀
• data()
• detach()
• empty()
• eq()
• find() - 只能通过标签名称查找
• hasClass()
• html()
• next() - 不支持选择器
• on() - 不支持命名空间，选择器或事件数据
• off() - 不支持命名空间、选择器或事件对象作为参数
• one() - 不支持命名空间或选择器
• parent() - 不支持选择器
• prepend()
• prop()
• ready() (不建议使用，应使用angular.element(callback)替代angular.element(document).ready(callback))
• remove()
• removeAttr() - 不支持多个属性
• removeClass() - 不支持将函数作为第一参数
• removeData()
• replaceWith()
• text()
• toggleClass() - 不支持将函数作为第一参数
• triggerHandler() - Passes a dummy event object to handlers
• unbind() (不建议使用，应使用off()) - 不支持命名空间或事件对象作为参数
• val()
• wrap()

jQuery/jqLite Extras

Angular还提供以下附加方法和事件给jqlite和jQuery:

事件

• $destory:当Dom被移除时， Angular 拦截所以的jqLite或者jquery Dom对象，销毁api和事件。这个事件能在Dom被移除前用来清除任何Dom上的相关。

方法

• controller(name)：检索当前元素或其父元素的controller，默认情况下，检索与ngController相关的controller，如果name是以驼峰模式命名的指令名称，那么这个指令的controller就是这样（如’ngModel’） 。
• injector():检索当前元素或其父元素的依赖注入。
• scope():检索当前元素或其父元素的scope。
• isolateScope():如果有一个scope直接附着在当前元素，检索一个隔离的scope，这仅用于元素包含一个创建了新的隔离的scope的指令，这个元素调用scope()总是返回原来的非隔离scope。
• inheritedData():和data()一样，但是会沿着Dom走直到值被找到或者走到顶级Dom元素。（由此可见，应该是向上传播的意思。）

栗子

给某个节点添加或移除某个属性：

//方法一
var test = angular.element(document.querySelector('#testId'));
//var test = angular.element($document[0].querySelector('#testId'));
test.addClass('testClass');
//方法二
var test = angular.element(document.getElementById('test');
//var test = angular.element($document[0].getElementById('test');
test.addClass('testClass');
//方法三
angular.forEach(angular.element(document).find('div'),function(node){
//angular.forEach($document.find('div'),function(node){
	if(node.id == 'testId'){
		node.addClass('testClass');
	}
	if(node.className == 'testClass'){
		node.removeClass('testClass')
	}
})
//找到所有p标签
var pSth = angular.element(document.querySelectorAll('p'));

相关资料

• 官方文档：angular.element
• AngularJs angular.element
• Angular.element和$document的使用方法分析，代替jquery