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

本篇文章给大家介绍一下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函数。

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编译链接指令的顺序，用以下代码输出日志的方式来说明：  

    
        
        
            
            
              
            
        
        
    

 
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。
  

  

  Bertha.ai

  一款专为WordPress打造的AI内容和图像创建工具

  下载

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

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

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

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

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

    

 
var app = angular.module('myApp', []);
 
app.directive('myParent', function () {
    return {
        restrict: 'EA',
        template: '
{{greeting}}{{name}}'+
        ''+
        '
',
        link: function(scope,elem,attr){
            scope.name = 'Lovesueee';
            scope.greeting = 'Hey, I am ';
        }
    };
});
app.directive('myChild', function () {
    return {
        restrict: 'EA',
        template: '
{{says}}
',
        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。

更多编程相关知识，请访问：编程入门！！