angular指令中的preLink函数和postLink函数
指令模板选项有complie和link两个字段，两者之间存在如下关系：
- 当compile字段存在时，link字段将被忽略，compile函数的返回值将作为link字段。
- 当compile不存在，link字段存在时，
angular通过这样directive.compile包装一层，使用用户定义的link字段。
= valueFn(directive.link);
- 如果是函数，那么这样的link，会被认为是postLink。
- 如果是对象，那么link.pre作为preLink函数，link.post作为postLink函数。
app.directive('myDirective', function () {
return {
compile: function () {
return {
pre: function () {
console.log('preLink');
},
post: function () {
console.log('postLink');
}
}
}
}
});
我们的指令工厂返回的是一个函数，那么angular通过这样的包装directive，即该函数将作为指令对象的postLink函数，像这样：
= { compile: valueFn(directive) }
app.directive('myDirective', function () {
return function () {
console.log('postLink');
}
});
angular编译链接指令的顺序
<body ng-app="myApp">
<A a1>
<B b1 b2></B>
<C>
<E e1></E>
<F>
<G></G>
</F>
</C>
<D d1></D>
</A>
</body> var app = angular.module('myApp', []);
var names = ['a1', 'b1', 'b2', 'e1', 'd1']; names.forEach(function (name) {
app.directive(name, function () {
return {
compile: function () {
console.log(name + ' compile');
return {
pre: function () {
console.log(name + ' preLink');
},
post: function () {
console.log(name + ' postLink');
}
};
}
};
});
});
输出：
a1 compile
b1 compile
b2 compile
e1 compile
d1 compile
a1 preLink
b1 preLink
b2 preLink
b2 postLink
b1 postLink
e1 preLink
e1 postLink
d1 preLink
d1 postLink
a1 postLink
可以看出：
- 所有的指令都是先compile，然后preLink，然后postLink。
- 节点指令的preLink是在所有子节点指令preLink，postLink之前，所以一般这里就可以通过scope给子节点传递一定的信息。
- 节点指令的postLink是在所有子节点指令preLink，postLink完毕之后，也就意味着，当父节点指令执行postLink时，子节点postLink已经都完成了，此时
子dom树已经稳定，所以我们大部分dom操作，访问子节点都在这个阶段。 - 指令在link的过程，其实是一个深度优先遍历的过程，postLink的执行其实是一个回溯的过程。
- 节点上的可能有若干指令，在搜集的时候就会按一定顺序排列（通过byPriority排序），执行的时候，preLinks是正序执行，而postLinks则是倒序执行。
明白了这些以后，就要小心一些容易忽略的陷阱。
<body ng-app="myApp">
<my-parent></my-parent>
</body> var app = angular.module('myApp', []); app.directive('myParent', function () {
return {
restrict: 'EA',
template: '<div>{{greeting}}{{name}}'+
'<my-child></my-child>'+
'</div>',
link: function(scope,elem,attr){
scope.name = 'Lovesueee';
scope.greeting = 'Hey, I am ';
}
};
});
app.directive('myChild', function () {
return {
restrict: 'EA',
template: '<div>{{says}}</div>',
link: function(scope,elem,attr){
scope.says = 'Hey, I am child, and my parent is ' + scope.name;
}
};
});
结果子指令输出为undefined
Hey, I am Lovesueee
Hey, I am child, and my parent is undefined
由上可以，myParent指令的link是一个postLink函数，而这个函数将在myChild指令的preLink和postLink执行完之后才执行。所以scope.name = undefined。
参考链接：http://blog.csdn.net/eric_tsai/article/details/50505671
angular指令中的preLink函数和postLink函数的更多相关文章
- angular指令中的scope绑定策略
针对独立 scope,可以通过在对象中声明如何从外部传入参数.有以下三种绑定策略: @ - 使用 DOM 属性值单项绑定到指令 scope 中.此时绑定的值总是一个字符串,因为 DOM 的属性值是一个 ...
- angular指令中@，=，&的区别
当directive中的scope设置为一个对象的时候,该指令就有了一个独立的作用域,AngularJS提供了一种绑定策略用于隔离作用域和外部作用域进行通信. 1.@(or @attr) 使用@符号可 ...
- angular指令中使用ngModelController
在这篇文章中 angular学习笔记(三十)-指令(10)-require和controller 说到了通过require属性和controller参数来让指令与指令之间互相交互. 本篇主要介绍的是指 ...
- angular指令中，require和transclude同时设置为true时的作用
最近在学习angularJS指令的时候,对指令对象中require属性和transclude属性同时设置为true比较疑惑,于是自己动手测试一下具体差异 index.html: <simple& ...
- angularjs指令中的compile与link函数详解（转）
http://www.jb51.net/article/58229.htm 通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link, ...
- 【转】angularjs指令中的compile与link函数详解
这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下 通常大家在 ...
- angularjs指令中的compile与link函数详解
这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下 通常大家在 ...
- angularjs指令中的compile与link函数详解补充
通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. angularjs里的指令非常神奇,允许你 ...
- [译]ng指令中的compile与link函数解析 转
通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. 原文地址 angularjs里的指令非常神 ...
随机推荐
- 一个简单小巧的CSV读取类
最近在基于亚马逊MWS API做一些服务,需要读取亚马逊返回的报表,是一个按照\t分割的文本,所以就封装了一个简单小巧的CsvReader类 使用方法 使用方法非常简单,只需要传递一个stream子类 ...
- webView 不能复制解决方案
开发中遇到部分机型--主要是系统低于4.0,如果调用了WebView.setWebChromeClient的方法,则没办法长按复制文字 查了一下是系统的一个bug https://bugzilla. ...
- JAVA基础---编码解码
所谓编码 即char->byte 所谓解码 即byte->char ISO-8859-1 中文字符会被黑洞吸收 全部变为"?" GB2312 汉字可以被编码为双字节 但 ...
- 搬瓦工修改自带ss密码和端口
如果是从控制面板那里直接点击安装的ss,只需要修改这两个文件: 修改端口 /root/.kiwivm-shadowsocks-port修改密码 /root/.kiwivm-shadowsocks-pa ...
- java集合系列——List集合之ArrayList介绍（二）
一:List概述 List是 java.util包下面的类,从<a href="http://blog.csdn.net/u010648555/article/details/5604 ...
- 洗礼灵魂，修炼python（2）--python安装和配置
安装python和基本配置: python官方下载地址:www.python.org 打开网站,然后下载对应(32位和64位,windows版还是linux版)的版本,你可以选择python3或者2, ...
- hdu3756三分基础题
Dome of Circus Time Limit: 10000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...
- 550 Create directory operation failed
往Linux系统中上传文件时候,我们经常会使用FTP连接Linux,也经常会使用mkdir命令来创建目录.最近发现用mkdir创建目录时提示550 Create directory operation ...
- 上传文件没有写权限Access to the path is denied
Access to the path is denied. asp.net程序目录放在系统盘,ntfs格式. 程序中对cfg.xml有写入操作. 运行的时候出现了这个问题. 在我自己的机器上没有问题 ...
- The Twelve-Factor App 实践
The Twelve-Factor App <The Twelve-Factor App>定义了一个优雅的互联网应用在设计过程中,尤其是在设计SAAS服务时,需要遵循的一些基本原则.本文为 ...