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 parameters -
bind()
- Does not support namespaces, selectors or eventData -
children()
- Does not support selectors clone()
contents()
-
css()
- Only retrieves inline-styles, does not callgetComputedStyle()
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()