angular.element()和$document的使用方法总结
首页 >  Web前端 > AngularJS  > 2018年01月20日阅(2359)评(0

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

Angular的jqLite

jqlite只提供以下的jQuery方法:

jQuery/jqLite Extras

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

事件

方法

栗子

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

//方法一
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'));

相关资料

angularjs实现类似window.onload()或$(document).ready()监听页面加载完成事件的几种方法
emlog插件:基于AngularJS的emlog链接管理系统

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

QQ
昵称*
邮箱*
主页