本篇文章给大家介绍一下angular指令中的preLinkpostLink函数。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

聊聊angular指令中的preLink和postLink函数插图

【】

指令模板选项有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函数。
app.directive('myDirective', function () {
return {
compile: function () {
return {
pre: function () {
console.log('preLink');
},
post: function () {
console.log('postLink');
}
}
}
}
});

我们的指令工厂返回的是一个函数,那么angular通过这样的包装 directive = { compile: valueFn(directive) },即该函数将作为指令对象的postLink函数,像这样:

app.directive('myDirective', function () {
return function () {
console.log('postLink');
}
});

angular编译链接指令的顺序

为了看清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。

更多编程相关知识,请访问:编程入门!!

以上就是聊聊angular指令中的preLink和postLink函数的详细内容,更多请关注811轩轩资源网其它相关文章!

声明:本文转载于:csdn,如有侵犯,请联系admin@php.cn删除

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注