angular指令之complie和link不得不说的故事
angular指令比较晦涩难懂的就是complie和link字段了,什么时候该用complie?什么时候该用link?总是很难分别清楚。当理解了指令的真正编译原理的时候,就会发现这相当的简单。
ng怎样处理指令其实是依赖于它定义时的对象属性的,你可以定义一个compile或者一个link函数,或者用pre-link和post-link函数来代替link.。
我们先看一段简单的代码:
html代码
<level-one>
<level-two>
<level-three>
Hello
</level-three>
</level-two>
</level-one>
js代码
var app = angular.module('plunker', []); function createDirective(name){
return function(){
return {
restrict: 'E',
compile: function(tElem, tAttrs){
console.log(name + ': compile => ' + tElem.html());
return {
pre: function(scope, iElem, iAttrs){
console.log(name + ': pre link => ' + iElem.html());
},
post: function(scope, iElem, iAttrs){
console.log(name + ': post link => ' + iElem.html());
}
}
}
}
}
} app.directive('levelOne', createDirective('levelOne'));
app.directive('levelTwo', createDirective('levelTwo'));
app.directive('levelThree', createDirective('levelThree'));
结果:
关于complie和preLink和postLink的调用顺序可以参考我的上一篇博文。
在这里再简要说明一下,从上面的结果可以看出,所有的指令都是先compile,然后preLink,然后postLink。节点指令的preLink是在所有子节点指令preLink,postLink之前,所以一般这里就可以通过scope给子节点传递一定的信息。节点指令的postLink是在所有子节点指令preLink,postLink完毕之后,也就意味着,当父节点指令执行postLink时,子节点postLink已经都完成了,此时子dom树已经稳定,所以我们大部分dom操作,访问子节点都在这个阶段。
这里我们主要来看一下complie、preLink和postLink函数中element属性有什么不同?scope作用域又是什么时候绑定的?
如果你仔细观察的话,就会发现上述结果中,传递给complie的element参数是最原始的html标志,变量指向的是template element。一旦运行levelone指令中的compile函数,ng就会递归深度遍历它的dom节点,然后在level-two与level-three上面重复这些操作.。因为complie的element是原始的html,所以可以在ng创建element实例以及创建scope对象之前改变dom的结构,以便在只有一个template element的情况下,生成多个element实例,例如ngRepeat。
因为在complie阶段,element还是原生的html,所以此时的scope是还没有创建的,complie函数不能够访问scope。在complie完成之后,将创建template element的element实例以及实例的scope。当linking发生时,这个实例element以及scope对象已经是可用的了,并被传递给preLink函数。所以preLink中的element不是一个原始的html,而是一个element实例,它拥有一个scope。同样的情况也在postLink之中。
一个元素的pre-link函数能够保证是运行在它所有的子指令的post-link与pre-link运行之前执行的。正如之前所说的一般这里就可以通过scope给子节点传递一定的信息。当运行包含子指令的指令post-link时,反向的post-link规则可以保证它的子指令的post-link是已经运行过的,这就是为什么人们都认为post-link是最安全或者默认的写业务逻辑的地方.。
参考链接:http://www.jb51.net/article/58229.htm
angular指令之complie和link不得不说的故事的更多相关文章
- angular学习笔记(三十)-指令(7)-compile和link(2)
继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...
- angular指令中的preLink函数和postLink函数
指令模板选项有complie和link两个字段,两者之间存在如下关系: 当compile字段存在时,link字段将被忽略,compile函数的返回值将作为link字段. 当compile不存在,lin ...
- angular指令的compile,prelink 和 postlink以及controller
一. 指令模板选项有complie和link两个字段,两者之间存在如下关系: 当compile字段存在时,link字段将被忽略,compile函数的返回值将作为link字段. 当compile不存在, ...
- angular中的compile和link函数
angular中的compile和link函数 前言 这篇文章,我们将通过一个实例来了解 Angular 的 directives (指令)是如何处理的.Angular 是如何在 HTML 中找到这些 ...
- angular指令深度学习篇
angular指令深度学习-过滤器 limitTo ... <body ng-app="app" > <div ng-controller="myCtr ...
- Angular指令渗透式理解
通过一段时间对angular指令的使用,理解了angular指令的意义,下面逐一介绍一下. ng-app:定义一个angualr模块,表示angular作用的范围,如下代码: ng-app在html标 ...
- Angular4 后台管理系统搭建(9) - 用自定义angular指令,实现在服务端验证
最近这段时间发现,北京这用angular4 或 angular2的公司很少.几乎是没有.很担心自己是不是把精力放到了不应该的地方.白耽误了时间.但是随着我对新版angular框架理解的加深.个人感觉a ...
- 与《YII框架》不得不说的故事—5篇目录
与<YII框架>不得不说的故事—基础篇 第1章 课程目标 1-1 课程目标 (00:54) 第2章 课前知识准备 2-1 YII的启动和安装 (05:12) 2-2 YII请求处理流程 ( ...
- 【征文】Hadoop十周年特别策划——我与Hadoop不得不说的故事
2016年是Hadoop的十周年生日,在今年,CSDN将以技术和实战为主题与大家共同为Hadoop庆生.其主要内容包含Hadoop专业词典.系列视频技术解析.Hadoop行业实践.线上问答.线下沙龙. ...
随机推荐
- 如何查看maven plugin所包含的goal
maven项目的构建生命周期(build lifecycle)由很多阶段组成:从validate到deploy. maven插件中包含goal.这些goal可以被绑定到不同的maven的构建阶段上.g ...
- CDS测试框架介绍:如何为ABAP CDS Entities写测试
动机 现在大家都知道单元测试对我们代码的好处.并且我们都承认它是开发过程中不可或缺的一部分.但是在把代码切换到数据库的模式下的时候,我们被粗暴地打回了软件测试的黑暗年代...我们现在面临着逻辑下推到A ...
- Hello PyQt5
在 ubuntu 系统上 GUI 编程,PyQt5 是个不错的选择.首先,当然是安装 PyQt5 了.终端输入命令: pip3 install PyQt5 即可. 1. 建立一目录 x01.PyQtH ...
- 洗礼灵魂,修炼python(8)--高效的字典
python几大核心之--字典(dict) 1.什么是字典 学生时代都用过字典吧?用这个字的读音,偏旁就能用字典查到其相关信息,词性,意思,组词,造句,还有在什么场合下用这个字等等的. 在python ...
- 郑厂长系列故事——排兵布阵 hdu4539(状态压缩DP)
郑厂长系列故事——排兵布阵 Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others)To ...
- 【笔记】如何查看HTTP请求头&&【实验吧】天下武功唯快不破
打开Chrome浏览器,点击右上角“三”按钮. 点击工具-----再点击开发者工具 找到Network选项框.以百度经验页面为例,点击任务选框来查看网络请求流 在Network框内会有所有的请 ...
- Python系列之文件操作、冒泡算法、装饰器、及递归
文件处理 python对文件进行读写操作的方法与具体步骤,包括打开文件.读取内容.写入文件.文件中的内容定位.及关闭文件释放资源等 open().file(),这个两函数提供了初始化输入\输出(I\O ...
- memcached讲解
Memcached 最近空闲的是时候研究了一下缓存,根据公司环境对缓存进行了系统的了解,我们使用memcacheed进行缓存,下面结合我的 理解,以及网上的相关资料,memecached进行讲解. m ...
- localStorage存值取值以及存取JSON,以及基于html5 localStorage的购物车
localStorage.setItem("key","value");//存储变量名为key,值为value的变量 localStorage.key = &q ...
- TCP/IP四层模型与OSI参考模型
TCP/IP四层模型: 1.链路层(数据链路层/网络接口层):包括操作系统中的设备驱动程序.计算机中对应的网络接口卡 2.网络层(互联网层):处理分组在网络中的活动,比如分组的选路. 3.运输层:主要 ...