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对这个方法包装成的对象提供的一些方法都列出来了，有需要的可以去看看哦。

Angular - - angular.element相关推荐

易于学习的.NET 6.0和Angular——Angular模板入门——第1部分
目录介绍背景先决条件使用代码使用Angular模板创建ASP.NET Core 带有Startup.cs的Visual Studio 2019 Visual Studio 2022不需要St ...
php中angular,Angular是什么
Angular是一种用于创建单一应用程序界面的前端框架,它有许多核心功能例如数据绑定,服务,指令以及依赖注入等等.它具有模块功能强大,拥有自定义命令等优点 Angular的介绍 AngularJS由M ...
Angular /Angular cli安装教程
1.安装node.js 在node官网下载安装包,我下载安装的是node-v12.14.0-x64.msi,win10 x64系统,默认安装,一路Next,不用配置环境变量(msi格式的安装文件会 ...
angular.element
angular.element AngularJs给我们也提供了一些操作DOM的方法---Jqlite angular.element()将DOM元素或者HTML字符串包装成一个jQuery元素. a ...
angular过滤字符_如何使用Angular和Azure计算机视觉创建光学字符读取器
angular过滤字符介绍 (Introduction) In this article, we will create an optical character recognition (OCR) ...
将选择元素绑定到Angular中的对象
本文翻译自:Binding select element to object in Angular I'd like to bind a select element to a list of obj ...
angular ngClick 阻止冒泡和默认行为
这其实是一个很简单的问题,如果你认真查看过Angular官方的API文档,本来不想记录的.但是这个问题不止一次的被人问起,所以今天在记录在这里. 在Angular中已经对一些ng事件如ngClick, ...
Angular项目构建指南 - 不再为angular构建而犹豫不决(转)
如果你不知道什么是Angular或者根本没听说过,那么我接下来所说的对你来说毫无益处,不过如果你打算以后会接触Angular或者干脆要涨涨姿势~读下去还是有点用的. Angular和它之前所出现的其余 ...
AngularJs angular.bind、angular.bootstrap、angular.copy
angular.bind 返回一个调用self的函数fn(self代表fn里的this).可以给fn提供参数args(*).这个功能也被称为局部操作,以区别功能. 格式:angular.bind(se ...

Angular - - angular.element

Angular - - angular.element相关推荐

最新文章

热门文章