e起飞young
一个前端码农的技术博客
angular.element()和$document的使用方法总结
[ 2018/01/20 ]

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'));

相关资料

有朋自远方来...评论一下呗O(∩_∩)O

  • 搜索