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元素。（由此可见，应该是向上传播的意思。）

使用代码：

Hello World!!!

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