angular.element

最新推荐文章于 2020-12-21 21:06:35 发布

ntpartner

最新推荐文章于 2020-12-21 21:06:35 发布

阅读量104

点赞数

AngularJS 同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

AngularJS API

23 篇文章 0 订阅

订阅专栏

angular.element

描述:

包裹着一部分DOM element或者是HTML字符串，把它作为一个jQuery元素来处理。（类似于jQuery的选择器啦）

如果jQuery被引入了，则angular.element就可以看作是jQuery选择器，选择的对象可以使用jQuery的函数；如果jQuery不可用，angular.element只能接受HTML字符串或者DOM元素为参数，选择的元素只可以调用Angular中嵌入的精简版的jQuery library（名为: "jQuery lite" or "jqLite").

注意: 所有被Angular引用的元素都是jQuery或者jqLite对象，不是原始的DOM元素了。

使用方法:

angular.element(element)

参数详解:

Param	Type	Details
element	string DOMElement	HTML字符串或者是DOM元素

返回值:

jQuery对象

示例代码:

示例1. 不引入jQuery

<!DOCTYPE HTML>
<html ng-app="elementExample">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="angular.min.js"></script>
</head>

<body>
<div id="test">博弈网络科技</div>


使用html字符串为参数
<input type="button" οnclick="button1()" value="button1"></input></br>
使用DOM元素作为参数
<input type="button" οnclick="button2()" value="button2"></input>

<script>
	//使用html字符串为参数
	function button1(){
		alert(angular.element('<div id="test">博弈网络科技</div>').html());
	}
	//使用DOM元素作为参数
	function button2(){
		var a = document.getElementById('test');
		alert(angular.element(a).html());
	}
	
</script>

</body>	
</html>

示例2. 引入jQuery

<!DOCTYPE HTML>
<html ng-app="elementExample">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="jquery-1.7.2.min.js"></script>
	<script src="angular.min.js"></script>
</head>

<body>
<div id="test">博弈网络科技</div>


使用选择器获取对象
<input type="button" οnclick="button1()" value="button1"></input></br>

<script>
	//使用html字符串为参数
	function button1(){
		alert(angular.element('#test').html());
	}
</script>

</body>	
</html>

补充:

jqLite支持的jQuery函数有：

addClass()
after()
append()
attr() - Does not support functions as parameters
bind() - Does not support namespaces, selectors or eventData
children() - Does not support selectors
clone()
contents()
css() - Only retrieves inline-styles, does not call getComputedStyle()
data()
detach()
empty()
eq()
find() - Limited to lookups by tag name
hasClass()
html()
next() - Does not support selectors
on() - Does not support namespaces, selectors or eventData
off() - Does not support namespaces or selectors
one() - Does not support namespaces or selectors
parent() - Does not support selectors
prepend()
prop()
ready()
remove()
removeAttr()
removeClass()
removeData()
replaceWith()
text()
toggleClass()
triggerHandler() - Passes a dummy event object to handlers.
unbind() - Does not support namespaces
val()
wrap()

angular还提供了一下额外的方法和事情（有无jQuery都适用）

事件：

$destroy: 当jqLite/jQuery DOM对象被销毁是促发。

方法：

controller(name)

injector()

scope()

isolateScope()

inheritedData()

ntpartner

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular.element

angular.element描述: 包裹着一部分DOM element或者是HTML字符串，把它作为一个jQuery元素来处理。（类似于jQuery的选择器啦）如果jQuery被引入了，则angular.element就可以看作是jQuery选择器，选择的对象可以使用jQuery的函数；如果jQuery不可用，angular.element只能接受HTML字符串或者...
复制链接

扫一扫