AngularJs angular.element

简介: angular.element 将DOM元素或者HTML字符串一包装成一个jQuery元素。 格式:angular.element(element); element:包装成jquery对象的html字符串或者dom元素 jqLite提供的方法: addClass() after() ...

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

相关文章
|
9月前
|
人工智能 开发框架 机器人
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
AstrBot 是一个开源的多平台聊天机器人及开发框架,支持多种大语言模型和消息平台,具备多轮对话、语音转文字等功能。
5345 38
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
|
人工智能 自然语言处理 搜索推荐
智源研究院开源中文互联网语料库CCI3.0,1000GB数据集,498GB高质量子集,魔搭社区可下载
近日,智源研究院正式发布中文互联网语料库CCI 3.0(Chinese Corpora Internet,简称 CCI)
|
XML Java Android开发
Android Studio App开发之碎片Fragment的讲解及实战(附源码 包括静态和动态注册)
Android Studio App开发之碎片Fragment的讲解及实战(附源码 包括静态和动态注册)
739 1
|
安全 Ubuntu Linux
Linux 文件传输利器:SCP 和 LRZSZ
**摘要:** 本文介绍了Linux下安全的文件传输工具`scp`和`lrzsz`。`scp`基于SSH,用于安全地在本地和远程主机间拷贝文件或目录,例如`scp user@host:file local_path`或`scp local_file user@host:remote_path`。`lrzsz`包含`rz`(上传)和`sz`(下载)命令,通过SSH连接传输文件,安装后在终端中使用`rz`选择本地文件上传,用`sz file`下载远程文件。注意`scp`需正确权限,`lrzsz`需SSH客户端支持ZModem。这两个工具为跨平台文件传输提供了便利。
353 2
|
人工智能 开发框架 监控
LangChain和Hub的前世今生
作为LLM(大模型)开发框架的宠儿,LangChain在短短几年内迅速崛起,成为开发者们不可或缺的工具。本文将带你探讨LangChain和LangChainHub的发展历程。
LangChain和Hub的前世今生
|
关系型数据库 MySQL Docker
PolarDB-X安装部署初体验
本文档介绍了体验阿里云PolarDB-X分布式数据库的安装和使用过程。首先提到PolarDB-X在稳定性及性能上的优势,然后详细描述了在CentOS 7环境下遇到的Python版本不兼容和Docker容器iptables配置问题的解决方法。通过创建Python 3.8的虚拟环境解决PyYAML依赖问题,接着在解决Docker容器内部网络问题后,成功安装并启动PolarDB-X。文中强调PolarDB-X完全兼容MySQL,适合熟悉MySQL的用户,并分享了安装历史记录以供参考。
512 7
|
Python
解决pip安装包后但是Pycharm检测不到
解决pip安装包后但是Pycharm检测不到
883 0
|
人工智能 搜索推荐 Go
一定要知道ChatGPT最新功能:自定义指令 Custom Instructions(上)
一定要知道ChatGPT最新功能:自定义指令 Custom Instructions
|
数据采集 消息中间件 缓存
如何提高爬虫的效率和速度?
【2月更文挑战第23天】【2月更文挑战第71篇】如何提高爬虫的效率和速度?
520 0
|
Kubernetes Cloud Native Linux
大规模 Kubernetes 集群故障注入的利器-ChaosBlade
大规模 Kubernetes 集群故障注入预演,chaosblade-operator 1.5.0 版本、chaosblade-operator 1.6.1 版本总结分析
大规模 Kubernetes 集群故障注入的利器-ChaosBlade