Angular - - angular.element
angular.element
將DOM元素或者HTML字符串一包裝成一個jQuery元素。
格式：angular.element(element);
element：包裝成jquery對象的html字符串或者dom元素
jqLite提供的方法：
- addClass()
- after()
- append()
- attr()
- bind()?– 不支持命名空間,選擇器和事件數據
- children()?– 不支持選擇器
- clone()
- contents()
- css()
- data()
- empty()
- eq()
- find()?– 通過標簽名稱限定查找
- hasClass()
- html()
- next()?– 不支持選擇器
- on()?– 不支持命名空間或選擇器
- off()?–不支持命名空間或選擇器
- one()?– 不支持命名空間或選擇器
- parent()?– 不支持選擇器
- prepend()
- prop()
- ready()
- remove()
- removeAttr()
- removeClass()
- removeData()
- replaceWith()
- text()
- toggleClass()
- triggerHandler()?-通過一個虛擬事件對象來處理。
- unbind()?– 不支持命名空間
- val()
- wrap()
事件：
$destory:當Dom被移除時， Angular 攔截所以的jqLite或者jquery Dom對象，銷毀api和事件。這個事件能在Dom被移除前用來清除任何Dom上的相關。
方法：
controller(name)：檢索當前元素或其父元素的controller，默認情況下，檢索與ngController相關的controller，如果name是以駝峰模式命名的指令名稱，那么這個指令的controller就是這樣（如’ngModel’） 。
injector():檢索當前元素或其父元素的依賴注入。
scope():檢索當前元素或其父元素的scope。
isolateScope():如果有一個scope直接附著在當前元素，檢索一個隔離的scope，這僅用于元素包含一個創建了新的隔離的scope的指令，這個元素調用scope()總是返回原來的非隔離scope。
inheritedData():和data()一樣，但是會沿著Dom走直到值被找到或者走到頂級Dom元素。（由此可見，應該是向上傳播的意思。）
使用代碼：
<div ng-app="Demo"><div ng-controller="testCtrl as ctrl"> <div id="myDiv">Hello World!!!</div> </div> </div(function () {angular.module("Demo", []).controller("testCtrl", testCtrl);function testCtrl() { var element = angular.element("#myDiv"); console.log(element) //element是個對象 //第一個屬性就是id為myDiv的div對象; //第二個屬性名為content,值是document; //第三個屬性名是length,值為1;第四個屬性名是selector,值是"#myDiv" }; }());
好了，翻譯的都解釋完了，使用的代碼也寫完了注釋解釋了。接下來說說野獸對angular.element的理解。
根據對Angular的理解，在controller里操作Dom是要剁手的...Ng有規定了使用指令對Dom進行操作，像我們在Ng開發中封裝一些jQuery插件使用時，也是通過指令來的。所以，這個方法也應該盡量的在指令中使用。
angular.element把Dom元素或者HTML的字符串包裝成jQuery對象，假如你在angular之前引用了jQuery，那么這就相當于jQuery的選擇器了，你也可以把jQuery的一些dom操作對他使用；那么如果你就是這么任性，不引用jQuery呢？別著急，ng自帶jqLite，上面也把jqLite對這個方法包裝成的對象提供的一些方法都列出來了，有需要的可以去看看哦。
總結
以上是生活随笔為你收集整理的Angular - - angular.element的全部內容，希望文章能夠幫你解決所遇到的問題。
