angularjs1.x的directive中的link参数element见解
angular.module("APP",[])
.directive("testDw",function () {
return{
restrict:"E",
scope:"=",
template: "<div class='a'><div class='b'> 123344</div></div>",
link:function (scope,element,attrs) {
console.log(element.length); //1
console.log(element); //2
console.log(element[0]); //3
console.log(element[0].firstChild); //4
console.log(element.children("div")); //5
console.log(element.children("div")[0]); //6
console.log(element[0].getElementsByClassName("a")); //7
element[0].getElementsByClassName("a")[0].style.backgroundColor="black";
element[0].firstChild.style.backgroundColor="red";
}
}
});
以上为指令中的代码
<!DOCTYPE html>
<html lang="en" ng-app="APP">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body > <div><test-dw></test-dw></div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app3.js"></script>
</body>
</html>
以上为html的代码
结果：
1.结果是 length=1，可以看出element是一个有部分jquery dom对象属性的dom对象，且有数据特性；
2.从结果可以看出指向的是[test-dw]，从图中可以看出element[0]=<test-dw>,length=1,_proto_为对象的内部原型（每个对象都会在其内部初始化一个属性，就是_proto_）
3.从结果可以看出 element[0]=<test-dw>
4.element[0].firstchild 为div块
5.element[0].children("div")不是一个div的具体块，它也和element一样是一个具有一个部分jquery dom对象属性的dom对象，且具有数据特性
6.element[0].children("div")[0]这个才是到了具体的div块 （它和element[0].firstchild一样，可以对比下）
7.注意：结果和5不一样，7是用原生的js写的，所以内部原型不同。
angularjs1.x的directive中的link参数element见解的更多相关文章
- AngularJS自定义Directive中link和controller的区别
在AngularJS中,自定义Directive过程中,有时用link和controller都能实现相同的功能.那么,两者有什么区别呢? 使用link函数的Directive 页面大致是: <b ...
- AngularJS in Action读书笔记5(实战篇)——在directive中引入D3饼状图显示
前言: "宁肯像种子一样等待 也不愿像疲惫的陀螺 旋转得那样勉强" 这是前几天在查资料无意间看到的一位园友的签名,看完后又读了两遍,觉得很有味道.后来一寻根究底才知这是出资大诗 ...
- AngularJs中，如何在父元素中调用子元素为自定义Directive中定义的函数？
最近一段时间准备使用AngularJs中的自定义Directive重构一下代码. 在这里说明一下,把自定义控件封装成Directive并不一定是要复用,而是要让代码结构更加清晰.就好像你将一个长方法拆 ...
- angularjs如何在视图渲染结束之后,或者render之后执行指令中的link方法呢?
angularjs如何在视图渲染结束之后,或者render之后执行指令中的link方法 关键字: $timeout app.directive("myDirective",func ...
- 如何将C++中的SOCKADDR_IN*参数类型转换成C#中的参数类型
将C++中的参数类型SOCKADDR_IN*映射为C#中的IntPtr参数类型的示例代码如下: IntPtr ptrSockaddr = new IntPtr(); //ip地址 sockaddr_i ...
- angular 中 directive中的多个指令
<div ng-controller="ctrl1"> <superman weight length speed>superman</superma ...
- AngularJS的指令(Directive) compile和link的区别及使用示例
如果我想实现这样一个功能,当一个input失去光标焦点时(blur),执行一些语句,比如当输入用户名后,向后台发ajax请求查询用户名是否已经存在,好有及时的页面相应. 输入 camnpr 失去焦点后 ...
- 控制器controller与指令中的link、controller中变量作用域的关系
angjualrjs中的作用域与原生js中的函数嵌套原理一致,都是存在作用域的继承.若在子控制器(同样包括在指令中的link或是controllerding中定义变量,此时指令中必须未使用scope独 ...
- react-router V4中的url参数
概述 之前写过react在router中传递数据的2种方法,但是有些细节没有理清楚,现在补上,记录下来,供以后开发时参考,相信对其他人也有用. 参考资料:stackoverflow react rou ...
随机推荐
- 为什么redis使用单线程还能这么快？
通常来讲,单线程处理能力要比多线程差,但是redis为什么就快了,这主要得益于以下几个原因: 1.纯内存访问,redis将所有数据放在内存中,内存的响应时长大约为100纳秒,这是redis达到每秒万级 ...
- 《Linux内核原理与分析》第四次作业
跟踪分析Linux内核的启动过程 使用实验楼的虚拟机打开shell 使用 gdb 跟踪调试内核 使用 qemu qemu -kernel linux-3.18.6 /arch/x86/boot/baI ...
- [C#]如何将 string 安全地转换为 int
当遇到string向int类型转换时会遇到以下问题: 1.字符串非数字格式 2.字符串描述的不是int型 3.转换后越界 这些情况都需要用try catch来捕获异常并处理 安全简单的转换可以用 In ...
- 对poi-excel导出的浅层理解
上一篇对excel导入做了浅层的解释,本文将对导出再做浅层解释. 仍然是相同的套路,只不过是反过来而已. 反过来方向理论上本来是这样的:cell-->row-->sheet-->wo ...
- Windows配置ffmpeg
一.ffmpeg简介 ffmpeg是一套可以用来记录.转换数字音频.视频,并能将其转化为流的开源计算机程序.采用LGPL或GPL许可证.它提供了录制.转换以及流化音视频的完整解决方案. 支持操作系统: ...
- *浅解嵌入式中的BootLoader
本文只作为本人学习过程中的记录及时不时的突发奇想偶记.鄙人菜鸟一只,文中如有错误或疏漏,若读者肯不吝赐教,在下感激零涕.文章一直不断更新中 一.何为Bootloader 在嵌入式系统中,Bootloa ...
- Java中产生随机数的两个方法
Java中产生随机数的两个方法 一.利用random方法来生成Java随机数. 在Java语言中生成Java随机数相对来说比较简单,因为有一个现成的方法可以使用.在Math类中,Java语言提供了一个 ...
- [UE4]Menu Anchor，菜单锚点
一.想要弹出某个菜单的时候,Menu Anchor可以做为菜单弹出的位置. 二.Menu Anchor本身不显示任何东西 三.Menu Class:选择要弹出的UI,可以是任意的UserWidget ...
- 安卓打开远程调试(免root)
首先用数据线连接adb,在pc端执行: adb tcpip 5555 然后就能拔掉数据线了. pc执行这个: adb connect 172.19.208.2 就能连接上
- VIVADO 入门之仿真与逻辑分析仪使用
多路分频器设计 在第七节的学习中,笔者带大家通过一个入门必学的流水灯实验实现,快速掌握了VIVADO基于FPGA开发板的基本流程.考虑到很多初学者并没有掌握好Vivado 下FPGA的开发流程,本章开 ...