angular.element
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元素了。
返回值:
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" onclick="button1()" value="button1"></input></br>
使用DOM元素作为参数
<input type="button" onclick="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" onclick="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 parametersbind()- Does not support namespaces, selectors or eventDatachildren()- Does not support selectorsclone()contents()css()- Only retrieves inline-styles, does not callgetComputedStyle()data()detach()empty()eq()find()- Limited to lookups by tag namehasClass()html()next()- Does not support selectorson()- Does not support namespaces, selectors or eventDataoff()- Does not support namespaces or selectorsone()- Does not support namespaces or selectorsparent()- Does not support selectorsprepend()prop()ready()remove()removeAttr()removeClass()removeData()replaceWith()text()toggleClass()triggerHandler()- Passes a dummy event object to handlers.unbind()- Does not support namespacesval()wrap()
angular还提供了一下额外的方法和事情（有无jQuery都适用）
事件：
$destroy: 当jqLite/jQuery DOM对象被销毁是促发。
方法：
controller(name)
injector()
scope()
isolateScope()
inheritedData()