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對這個方法包裝成的對象提供的一些方法都列出來了，有須要的能夠去看看哦。