嘿!@野兽,你的ng api 掉了 - - angular.element

@野兽的 ng api 学习 -- 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">
<div id="myDiv">Hello World!!!</div>
</div>
</div>
<script>
angular.module("Demo", [])
.controller("testCtrl", ["$scope", function ($scope) {
var element = angular.element("#myDiv");
//element是个对象

//第一个属性就是id为myDiv的div对象;

//第二个属性名为content,值是document;

//第三个属性名是length,值为1;第四个属性名是selector,值是"#myDiv"
}])
</script>

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

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

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

好了,今天先扯到这里... 有点累,睡觉了...

时间: 2024-10-14 11:15:47

嘿!@野兽,你的ng api 掉了 - - angular.element的相关文章

嘿!@野兽,你的ng api 掉了 - - angular.forEach

@野兽的 ng api 学习 -- angular.forEach angular.forEach 调用迭代器函数取每一项目标的集合,它可以是一个对象或数组.迭代器函数与迭代器(value.key)一起调用,其中值是一个对象属性或数组元素的值,而数组元素是对象属性的关键或数组元素索引.为函数指定一个可选的上下文. 格式:angular.forEach(obj,iterator,[context]); obj:遍历的对象 iterator:迭代器 [content]: 对象为迭代器函数的上下文(t

嘿!@野兽,你的ng api 掉了 - - angular.uppercase和angular.lowercase

@野兽的 ng api 学习 -- angular.uppercase和angular.lowercase angular.uppercase 将指定的字符串转换成大写 格式:angular.uppercase(string); string:被转换成大写的字符串. 使用代码: var str = "ABCabc"; var upperCase = angular.uppercase(str);//ABCABC angular.lowercase 将指定的字符串转换成小写 格式:ang

嘿!@野兽,你的ng api 掉了 - - angular.identity和angular.noop

@野兽的 ng api 学习 -- angular.identity和angular.noop angular.identity 函数返回本身的第一个参数.这个函数一般用于函数风格. 格式:angular.identity() 使用代码: <script> angular.module("Demo", []) .controller("testCtrl", ["$scope", function ($scope) { var getR

嘿!@野兽,你的ng api 掉了 - - angular.copy

@野兽的 ng api 学习 -- angular.copy angular.copy 针对对象或数字创建一个深层的拷贝. 格式:angular.copy(source, [destination]); source:被拷贝的对象 destination:接收的对象 [注意:参数类型是对象或数组] 使用代码: var objA, objD = []; //objA:undefined objD:[] var objB = { text: "Hello World" }; var obj

嘿!@野兽,你的ng api 掉了 - - angular.bootstrap

@野兽的 ng api 学习 -- angular.bootstrap angular.bootstrap 使用这个功能来手动启动angular应用.基于ngScenario的端对端测试不能使用bootstrap手动启动,需要使用ngApp. Angular会检测应用在浏览器是否已启动并且只允许第一次的启动,随后的每次启动都将会导致浏览器控制台报错. 这可以防止应用出现多个Angular实例尝试在Dom上运行的一些奇异结果. 格式:angular.bootstrap(element,[nodul

野兽的Angular Api 学习、翻译及理解 - - form.FormController、ngModel.NgModelController

野兽的ng api学习 -- form.FormController.ngModel.NgModelController form.FormController FormController跟踪所有他所控制的和嵌套表单以及他们的状态,就像有效/无效或者脏值/原始. 每个表单指令创建一个FormController实例. 方法: $addControl(); 给表单注册一个控制器. 使用了ngModelController的输入元素会在连接时自动执行. $removeControl(); 给表单注

@野兽的Angular Api 学习、翻译及理解 - - angular.module

@野兽的 ng api 学习 -- angular.module angular.module 创建一个全局的可用于检索和注入的Angular模块.所有Angular模块(Angular核心模块或者第三方模块)想要在应用里实现,都需要使用这个注入机制. 格式:angular.module(name,[requires],[configFn]); name :  string  创建的模块名称. [requires]: 字符串的数组  代表该模块依赖的其他模块列表,如果不依赖其他模块,则为空数组.

野兽的Angular Api 学习、翻译及理解 - - ngRoute Angular自带的路由

野兽的ng api学习 -- ngRoute ngRoute $routeProvider 配置路由的时候使用. 方法: when(path,route); 在$route服务里添加一个新的路由. path:该路由的路径. route:路由映射信息. controller:字符串或函数,指定控制器. controllerAs:一个用于控制器的标识符名称.. template:字符串或函数,html模板. templateUrl:字符串或函数,html模板的地址. resolve:对象,一个可选的

野兽的Angular Api 学习、翻译及理解 - - $templateCache 和 $templateRequest

野兽的ng api学习 -- $templateCache 和 $templateRequest $templateCache 第一次使用模板,它被加载到模板缓存中,以便快速检索.你可以直接将模板标签加载到缓存中,或者通过$templateCache服务. 通过script标签: <script type=”text/ng-template” id=”template.html”> <p>This is the content of the template</p> &