首页-教程-Web前端

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

 3446

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


聊聊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函数。

  1. app.directive('myDirective', function () {
  2.     return {
  3.         compile: function () {
  4.             return {
  5.                 pre: function () {
  6.                     console.log('preLink');
  7.                 },
  8.                 post: function () {
  9.                     console.log('postLink');
  10.                 }
  11.             }
  12.         }
  13.     }
  14. });

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

  1. app.directive('myDirective', function () {
  2.     return function () {
  3.         console.log('postLink');
  4.     }
  5. });

angular编译链接指令的顺序

为了看清angular编译链接指令的顺序，用以下代码输出日志的方式来说明：

  1. <body ng-app="myApp">
  2.     <A a1>
  3.         <B b1 b2></B>
  4.         <C>
  5.             <E e1></E>
  6.             <F>
  7.               <G></G>
  8.             </F>
  9.         </C>
  10.         <D d1></D>
  11.     </A>
  12. </body>
  13.   
  14. var app = angular.module('myApp', []);
  15. var names = ['a1', 'b1', 'b2', 'e1', 'd1'];
  16.   
  17. names.forEach(function (name) {
  18.     app.directive(name, function () {
  19.         return {
  20.             compile: function () {
  21.                 console.log(name + ' compile');
  22.                 return {
  23.                     pre: function () {
  24.                         console.log(name + ' preLink');
  25.                     },
  26.                     post: function () {
  27.                         console.log(name + ' postLink');
  28.                     }
  29.                 };
  30.             }
  31.         };
  32.     });
  33. });

输出：

  1. a1 compile
  2. b1 compile
  3. b2 compile
  4. e1 compile
  5. d1 compile
  6. a1 preLink
  7. b1 preLink
  8. b2 preLink
  9. b2 postLink
  10. b1 postLink
  11. e1 preLink
  12. e1 postLink
  13. d1 preLink
  14. d1 postLink
  15. a1 postLink

可以看出：

所有的指令都是先compile，然后preLink，然后postLink。

节点指令的preLink是在所有子节点指令preLink，postLink之前，所以一般这里就可以通过scope给子节点传递一定的信息。

节点指令的postLink是在所有子节点指令preLink，postLink完毕之后，也就意味着，当父节点指令执行postLink时，子节点postLink已经都完成了，此时子dom树已经稳定，所以我们大部分dom操作，访问子节点都在这个阶段。

指令在link的过程，其实是一个深度优先遍历的过程，postLink的执行其实是一个回溯的过程。

节点上的可能有若干指令，在搜集的时候就会按一定顺序排列（通过byPriority排序），执行的时候，preLinks是正序执行，而postLinks则是倒序执行。

明白了这些以后，就要小心一些容易忽略的陷阱。

  1. <body ng-app="myApp">
  2.     <my-parent></my-parent>
  3. </body>
  4.   
  5. var app = angular.module('myApp', []);
  6.   
  7. app.directive('myParent', function () {
  8.     return {
  9.         restrict: 'EA',
  10.         template: '<div>{{greeting}}{{name}}'+
  11.         '<my-child></my-child>'+
  12.         '</div>',
  13.         link: function(scope,elem,attr){
  14.             scope.name = 'Lovesueee';
  15.             scope.greeting = 'Hey, I am ';
  16.         }
  17.     };
  18. });
  19. app.directive('myChild', function () {
  20.     return {
  21.         restrict: 'EA',
  22.         template: '<div>{{says}}</div>',
  23.         link: function(scope,elem,attr){
  24.             scope.says = 'Hey, I am child, and my parent is ' + scope.name;
  25.         }
  26.     };
  27. });

结果子指令输出为undefined

  1. Hey, I am Lovesueee
  2. Hey, I am child, and my parent is undefined

由上可以，myParent指令的link是一个postLink函数，而这个函数将在myChild指令的preLink和postLink执行完之后才执行。所以scope.name = undefined。


TAG标签：
本文网址：https://www.zztuku.com/detail-8883.html
站长图库 - 聊聊angular指令中的preLink和postLink函数
申明：如有侵犯，请 联系我们 删除。

评论（0）条

您还没有登录，请 登录 后发表评论！

提示：请勿发布广告垃圾评论，否则封号处理！！

    编辑推荐