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文件。