首页 > 其他 > 详细

angular.element

时间:2014-12-10 02:16:51      阅读:382      评论:0      收藏: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 stringDOMElement

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" 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 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()
?

angular.element

原文:http://boyitech.iteye.com/blog/2164486

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!