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里的指令非常神 ...
随机推荐
- 在java中使用MongoDB数据库
Java 安装 要想在 Java 程序中使用 MongoDB,需要先确定是否安装了 MongoDB JDBC 驱动,并且要在机器上安装了 Java.查看 Java 教程来确保在机器上安装好 Java. ...
- taobao_api项目开坑，自主完成淘宝主要接口的开发-版本：卖家版（非淘宝api）
项目名称:taobao_api 项目目的:独立实现各个淘宝操作的相关api,不依赖淘宝提供的api,而是自己实现接口 前期实现接口:已付款订单查询(自动更新), 订单发货 , 订单备注 应用场景:中小 ...
- http_load压力测试windows版使用方法及结果分析
工具下载: https://pan.baidu.com/s/1gftN13H 配置说明:解压后将cygwin1.dll 放置到 C:\Windows\system目录下,将http_load.exe ...
- es6函数的rest参数和拓展运算符(...)的解析
es6的新特性对函数的功能新增加了rest参数和...的拓展运算符.这是两个什么东西呢? 先来看一个问题:如何获取一个函数除了定义的参数之外的其他参数?传统的做法是借助函数的arguments关键字来 ...
- es6箭头函数讲解
es6箭头函数的用法 箭头函数是es6的一种函数的简写方法. 如下: var f = v = > v; //等同于 var f = function(v){ return v; } var su ...
- 一款优秀的JavaScript框架—AngularJS
AngularJS简介 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.Angular ...
- 实例说明MVC,MVP,MVVM架构
很早就知道有这三个概念,但是一直都不清楚是怎么回事,在网上搜索,都是泛泛而谈,没有具体例子,新手是看不懂的,直到找到这篇文章,我对这三个架构有了更清楚的了解. 从一个简单的例子去研究这三个架构. 注意 ...
- 1007 正整数分组 1010 只包含因子2 3 5的数 1014 X^2 Mod P 1024 矩阵中不重复的元素 1031 骨牌覆盖
1007 正整数分组 将一堆正整数分为2组,要求2组的和相差最小. 例如:1 2 3 4 5,将1 2 4分为1组,3 5分为1组,两组和相差1,是所有方案中相差最少的. Input 第1行:一个 ...
- MUI顶部选项卡的用法(tab-top-webview-main)
前 言 MUI是一款最接近原生APP体验的高性能前端框架,它的比较重要的功能是:下拉刷新.侧滑导航.滑动触发操作菜单和顶部(底部)选项卡等 最近用MUI做手机app应用的时候 ...
- MMORPG战斗系统随笔（三）、AI系统简介
在设计一款游戏的时候,如果我们是玩家,是希望自己能够操作角色畅玩游戏的.在一款MMORPG游戏中,大部分的实际游戏角色,是需要玩家来操作的,通过在游戏大世界相互完成游戏中的任务等等来体验游戏.在大世界 ...