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里的指令非常神 ...
随机推荐
- eclipse安装java ee插件方法步骤
1.本人以前使用的MyEclipse进行Javaweb开发,但是后来由于myeclipse实在太臃肿,经常在运行的过程中不流畅 (可能电脑内存也不是太高吧) !所以坚决换用eclipse,但是问题 ...
- 《Java从入门到放弃》JavaSE入门篇：练习——单身狗租赁系统
今天,我们要玩个大的!!! 我们把之前使用数组做的这个单身狗系统改版成数据库版本,并且使用面向对象里面的一些简单思想.如果有不知道这个系统的看官,请跳转到目录页,然后再选择单身狗系统(数组版)先围观五 ...
- JavaScript 框架------------AngularJS（上）
一.简单了解一下AngularJS AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过 指令 扩展了 ...
- java 读取properties文件总结
一.java读取properties文件总结 在java项目中,操作properties文件是经常要做的,因为很多的配置信息都会写在properties文件中,这里主要是总结使用getResource ...
- 浅析Spring MVC工作机制
1.如何使用Spring MVC? 在web.xml中配置一个DispatcherServlet DispatchServlet初始化的时候会去寻找一个在应用程序的WEB-INF目录下的配置文件,命名 ...
- PyTorch教程之Tensors
Tensors类似于numpy的ndarrays,但是可以在GPU上使用来加速计算. 一.Tensors的构建 from __future__ import print_function import ...
- 调用惯例Calling Convention （或者说：调用约定）
调用惯例影响执行效率,参数的传递方式以及栈清除的方式. 调用惯例 参数传递顺序 谁负责清除参数 参数是否使用暂存器 register 从左到右 被调用者 是 pascal 从左到右 被调用者 否 ...
- Springboot - 学习笔记 ②
前言 这一篇是关于spring boot中的配置(configuration)的介绍,我们接下来要说的男主就是 “application.properties”. “男神”默认是生成在“/src/ma ...
- D. Mysterious Present (看到的一个神奇的DP，也可以说是dfs）
D. Mysterious Present time limit per test 2 seconds memory limit per test 64 megabytes input standar ...
- 1289 大鱼吃小鱼 1305 Pairwise Sum and Divide 1344 走格子 1347 旋转字符串 1381 硬币游戏
1289 大鱼吃小鱼 有N条鱼每条鱼的位置及大小均不同,他们沿着X轴游动,有的向左,有的向右.游动的速度是一样的,两条鱼相遇大鱼会吃掉小鱼.从左到右给出每条鱼的大小和游动的方向(0表示向左,1表示向右 ...