AngularJs 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"
    };
  }());

特別提醒哦，在controller裏操做Dom是要剁手的...Ng若是須要對Dom進行操做則須要在指令裏處理代碼，像咱們在Ng開發中封裝一些jQuery插件使用時，也是經過指令來的。

angular.element把Dom元素或者HTML的字符串包裝成jQuery對象，假如你在angular以前引用了jQuery，那麼這就至關於jQuery的選擇器了，你也能夠把jQuery的一些dom操做對他使用；那麼若是你就是這麼任性，不引用jQuery呢？彆着急，ng自帶jqLite，上面也把jqLite對這個方法包裝成的對象提供的一些方法都列出來了，有須要的能夠去看看，不過畢竟是輕量版的，功能沒那麼齊全，如需更多操做，可在angular[.min].js文件以前引入jQuery文件。