本篇文章给大家介绍一下angular指令中的preLink和postLink函数。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
【相关推荐:《angular教程》】
指令模板选项有complie和link两个字段,两者之间存在如下关系:
- 当compile字段存在时,link字段将被忽略,compile函数的返回值将作为link字段。
- 当compile不存在,link字段存在时,
angular
通过这样directive.compile = valueFn(directive.link);
包装一层,使用用户定义的link字段。
而link分为preLink和postLink两个阶段,从link字段或者compile函数的返回值来看:
- 如果是函数,那么这样的link,会被认为是postLink。
- 如果是对象,那么link.pre作为preLink函数,link.post作为postLink函数。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | app.directive(& #39;myDirective', function () {
return {
compile: function () {
return {
pre: function () {
console.log(& #39;preLink');
},
post: function () {
console.log(& #39;postLink');
}
}
}
}
});
|
Salin selepas log masuk
我们的指令工厂返回的是一个函数,那么angular通过这样的包装 directive = { compile: valueFn(directive) }
,即该函数将作为指令对象的postLink函数,像这样:
1 2 3 4 5 | app.directive(& #39;myDirective', function () {
return function () {
console.log(& #39;postLink');
}
});
|
Salin selepas log masuk
angular编译链接指令的顺序
为了看清angular编译链接指令的顺序,用以下代码输出日志的方式来说明:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <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(& #39;myApp', []);
var names = [& #39;a1', 'b1', 'b2', 'e1', 'd1'];
names.forEach( function (name) {
app.directive(name, function () {
return {
compile: function () {
console.log(name + & #39; compile');
return {
pre: function () {
console.log(name + & #39; preLink');
},
post: function () {
console.log(name + & #39; postLink');
}
};
}
};
});
});
|
Salin selepas log masuk
输出:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 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
|
Salin selepas log masuk
可以看出:
所有的指令都是先compile,然后preLink,然后postLink。
节点指令的preLink是在所有子节点指令preLink,postLink之前,所以一般这里就可以通过scope给子节点传递一定的信息。
节点指令的postLink是在所有子节点指令preLink,postLink完毕之后,也就意味着,当父节点指令执行postLink时,子节点postLink已经都完成了,此时子dom树已经稳定
,所以我们大部分dom操作,访问子节点都在这个阶段。
指令在link的过程,其实是一个深度优先遍历的过程,postLink的执行其实是一个回溯的过程。
节点上的可能有若干指令,在搜集的时候就会按一定顺序排列(通过byPriority排序),执行的时候,preLinks是正序执行,而postLinks则是倒序执行。
明白了这些以后,就要小心一些容易忽略的陷阱。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <body ng-app= "myApp" >
<my-parent></my-parent>
</body>
var app = angular.module(& #39;myApp', []);
app.directive(& #39;myParent', function () {
return {
restrict: & #39;EA',
template: & #39;<div>{{greeting}}{{name}}'+
& #39;<my-child></my-child>'+
& #39;</div>',
link: function (scope,elem,attr){
scope.name = & #39;Lovesueee';
scope.greeting = & #39;Hey, I am ';
}
};
});
app.directive(& #39;myChild', function () {
return {
restrict: & #39;EA',
template: & #39;<div>{{says}}</div>',
link: function (scope,elem,attr){
scope.says = & #39;Hey, I am child, and my parent is ' + scope.name;
}
};
});
|
Salin selepas log masuk
结果子指令输出为undefined
1 2 | Hey, I am Lovesueee
Hey, I am child, and my parent is undefined
|
Salin selepas log masuk
由上可以,myParent指令的link是一个postLink函数,而这个函数将在myChild指令的preLink和postLink执行完之后才执行。所以scope.name = undefined。
更多编程相关知识,请访问:编程入门!!
Atas ialah kandungan terperinci 聊聊angular指令中的preLink和postLink函数. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!