博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Angular - - angular.element
阅读量:5853 次
发布时间:2019-06-19

本文共 1742 字,大约阅读时间需要 5 分钟。

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

好了,翻译的都解释完了,使用的代码也写完了注释解释了。接下来说说野兽对angular.element的理解。

根据对Angular的理解,在controller里操作Dom是要剁手的...Ng有规定了使用指令对Dom进行操作,像我们在Ng开发中封装一些jQuery插件使用时,也是通过指令来的。所以,这个方法也应该尽量的在指令中使用。

angular.element把Dom元素或者HTML的字符串包装成jQuery对象,假如你在angular之前引用了jQuery,那么这就相当于jQuery的选择器了,你也可以把jQuery的一些dom操作对他使用;那么如果你就是这么任性,不引用jQuery呢?别着急,ng自带jqLite,上面也把jqLite对这个方法包装成的对象提供的一些方法都列出来了,有需要的可以去看看哦。

转载地址:http://hbsjx.baihongyu.com/

你可能感兴趣的文章
在Linux中执行.sh脚本,异常/bin/sh^M: bad interpreter: No such file or directory
查看>>
就是一个表格
查看>>
CakePHP 2.x CookBook 中文版 第三章 入门 之 CakePHP 的结构
查看>>
Objective-C的算术表达式 .
查看>>
找回使用Eclipse删除的文件
查看>>
rabbitmq 消息系统 消息队列
查看>>
集成spring3、hibernate4、junit
查看>>
URL与ASCII
查看>>
Redis.conf 说明
查看>>
我的友情链接
查看>>
java读取properties配置文件
查看>>
LVS+keepalived负载均衡
查看>>
UITableview中cell重用引起的内容重复的问题
查看>>
stm32 ADC使用 单通道 多通道
查看>>
Windows7操作系统安装教程(图文)
查看>>
IOS Core Animation Advanced Techniques的学习笔记(三)
查看>>
除了模拟手术教学,VR在医疗领域如何应用?
查看>>
HashCode
查看>>
盘点5款Ubuntu监控工具解决CPU暴增问题
查看>>
java 测试IP
查看>>