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

AngularJs angular.element的更多相关文章

  1. angular.element方法汇总以及AngularJS 动态添加元素和删除元素

    addClass()-为每个匹配的元素添加指定的样式类名after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点append()-在每个匹配元素里面的末尾处插入参数内容att ...

  2. AngularJS操作DOM——angular.element

    addClass()-为每个匹配的元素添加指定的样式类名 after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点 append()-在每个匹配元素里面的末尾处插入参数内容a ...

  3. angularjs获取元素以及angular.element()用法

    addClass()-为每个匹配的元素添加指定的样式类名 after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点 append()-在每个匹配元素里面的末尾处插入参数内容 ...

  4. Angular.element和$document的使用方法分析,代替jquery

    AngularJs是不直接操作DOM的,但是在平时的开发当中,我们有的时候还是需要操作一些DOM的,如果使用原生的JS的话操作过于麻烦,所以大家一般都是使用jQuery,jQuery虽然好用,但是An ...

  5. angular.element 动态添加和删除元素

    addClass()-为每个匹配的元素添加指定的样式类名after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点append()-在每个匹配元素里面的末尾处插入参数内容att ...

  6. angularJS DOM element() $compile()

    我们可以使用angularJS来动态地添加和删除节点 与jQuery不同的是,html字符串需要经过$compile()方法的编译才能产生html的DOM的node 注意element()方法的使用 ...

  7. AngularJs Angular数据类型判断

    angular.isArray 判断括号内的值是否为数组. 格式:angular.isArray(value); value: 被判断是否为数组的值. ------------------------ ...

  8. angular.element函数

    听说这个 element 函数和 jQuery 里的 $() 差不多 element函数有一个参数,传入的是一个对象,后面可以接着点其他的方法,如果jQuery可用的话就可以在它的后面点jQuery的 ...

  9. ng-click得到当前元素,angular.element()用法

    <!DOCTYPE html> <html> <head> <title></title> <script src="lib ...

随机推荐

  1. nios II--实验7——数码管IP硬件部分

    数码管 硬件开发 新建原理图 打开Quartus II 11.0,新建一个工程,File -> New Project Wizard…,忽略Introduction,之间单击 Next>  ...

  2. 删除root子目录,如何恢复子目录配置文件

    手贱,一不小心rm -rf 问题描述:删除/root/子目录文件(含隐藏配置文件)shell变成-bash-4.2#,如何恢复原貌 解决方法: root用户进入,自己配置相关文件:mkdir /roo ...

  3. python作为一种胶水和c/c++

    如果需要用 Python 调用 C/C++ 编写的第三方库,只需要一个脚本语言来粘合它们.这个时候,用 Python ctypes 可以很方便地实现调用. StackOverflow 上的 Calli ...

  4. 揭秘PHP匿名函数

    揭秘PHP匿名函数 定义:匿名函数就是没有名字的函数. 有2种形式的匿名函数: 形式1:将一个匿名函数"赋值"给一个变量--此时该变量就代表该匿名函数了! 形式2: 是直接将一个匿 ...

  5. Oracle空串与null的处理

    来源于:http://blog.itpub.net/24870090/viewspace-1057853/ Oracle空串与null的处理[@more@] Oracle中的空字符串基本上是被当成空N ...

  6. MVC 理解小谈

    1. 如何理解MVC MVC 是一种经典的设计模式,全名为 Model-View-Controller,即 模型-视图-控制器. 其中,模型 是用于封装数据的载体,其本质是一个普通的 Java Bea ...

  7. 分布式搜索引擎Elasticsearch PHP类封装 使用原生api

    //官方的 php  api写的鸡肋了,下面这个类可以使用 es api 操作. <?php class ElasticSearch { public $index; function __co ...

  8. 我的第一个jsp程序-实现注册登录留言功能

    1,注册功能,包括两个页面 zhuce.jsp注册页面 <%@ page language="java" contentType="text/html; chars ...

  9. 基于Oracle的Mybatis 批量插入

    项目中会遇到这样的情况,一次性要插入多条数据到数据库中,有两种插入方法: 方法一: Mybatis本身只支持逐条插入,比较笨的方法,就是遍历一个List,循环中逐条插入,比如下面这段代码 for(Da ...

  10. 问题-栈S最多能容纳4个元素,现有6个元素按A、B、C、D、E、F顺序进栈,问可能的出栈顺序。

    住栈的特性:对于取出栈内元素每次只能从栈顶开始取(后进先出(栈满时,只能先出后进)) 由于栈内只能容纳4个元素: 所以 E F不可能第一个出栈: 当栈内少于四个元素时 既可以选择进栈,也可以选择出栈 ...