通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,244)">post-link的用法与区别.

原文地址

angularjs里的指令非常神奇,允许你创建非常语义化以及高度重用的组件,可以理解为web components的先驱者.

网上已经有很多介绍怎么使用指令的文章以及相关书籍,相互比较的话,很少有介绍compile与link的区别,更别说pre-link与post-link了.

大部分教程只是简单的说下compile会在ng内部用到,而且建议大家只用是这样的

当你在页面中使用script标签加载ng应用程序代码时,244)">ng监听上面的dom完成事件,查找带有ng-app属性的元素.

当找到这样的元素之后,244)">ng开始处理dom以这个元素的起点,所以假如ng-app被添加到html元素上,则ng就会从html元素开始处理dom.

从这个起点开始,244)">ng开始递归查找所有子元素里面,符合应用程序里定义好的指令规则.

ng怎样处理指令其实是依赖于它定义时的对象属性的,你可以定义一个compile或者一个link函数,或者用pre-link和post-link函数来代替link.

所以这些函数的区别呢?为什么要使用它?以及什么时候使用它呢?

带着这些问题跟着我一步一步来解答这些迷团吧

为了解释这些函数的区别,下面我将使用一个简单易懂的例子

• 如果您有任何的问题,请不要犹豫赶紧在下面加上你的评论吧.

看看下面一段html标签代码

<level-one>
        <level-two>
            <level-three>
                Hello 
            </level-three>
        </level-two>
    </level-one>@H_673_136@ 
   

然后是一段js代码

var app = angular.@H_67_146@module('plunker', []);

    function createDirective(name){
      return function(){
        return {
          reStrict: 'E',
          compile: function(tElem, tAttrs){
            console.log(name + ': compile');
            return {
              prefunction(scope, iElem, iAttrs){
                console.log(name ': pre link');
              },
              post': post link');
              }
            }
          }
        }
      }
    }

    app.directive('levelOne', createDirective('levelOne'));
    app.directive('levelTwo',33)">'levelTwo'));
    app.directive('levelThree',33)">'levelThree'));@H_673_136@ 
   

结果非常简单:让ng来处理三个嵌套指令,并且每个指令都有自己的complile,244)">post-link函数,每个函数都会在控制台里打印一行东西来标识自己.

这个例子能够让我们简单的了解到ng在处理指令时,内部的流程

下面是一个在控制台输出结果的截图

如果想自己试一下这个例子的话,请点击this plnkr,然后在控制台查看结果.

第一个要注意的是这些函数的调用顺序:

// COMPILE PHASE
    // levelOne: compile function is called
    // levelTwo: compile function is called
    // levelThree: compile function is called

    // PRE-LINK PHASE
    // levelOne: pre link function is called
    // levelTwo: pre link function is called
    // levelThree: pre link function is called

    // POST-LINK PHASE (Notice the reverse order)
    // levelThree: post link function is called
    // levelTwo: post link function is called
    // levelOne: post link function is called@H_673_136@ 
   

这个例子清晰的显示出了ng在link之前编译所有的指令,然后link要又分为了post-link阶段.

注意下,244)">pre-link的执行顺序是依次执行的,但是post-link正好相反.

所以上面已经明确标识出了不同的阶段,244)">pre-link有什么区别呢,都是相同的执行顺序,为什么还要分成两个不同的函数呢?

为了挖的更深一点,让我们简单的修改一下上面的代码,它也会在各个函数里打印参数列表中的element变量

function createDirective(name){ 
      @H_35_419@': compile => ' + tElem.html());
            @H_35_419@': pre link => ' + iElem.html());
              },33)">': post link => ' + iElem.html());
              }
            }
          }
        }
      }
    }

    app.directive('levelThree'));@H_673_136@ 
   

注意下console.log里的输出,除了输出原始的html标记基本没别的改变.

这个应该能够加深我们对于这些函数上下文的理解.

再次运行代码看看

下面是一个在控制台输出结果的截图

假如你还想自己运行看看@L_618_61@,可以点击输出结果.

输出dom的结果可以暴露一些有趣的事情:dom内容在pre-link两个函数中是不一样的

Compile

我们已经知道当ng发现dom构建完成时就开始处理dom.

所以当ng在遍历dom的时候,碰到level-one元素,从它的定义那里了解到,要执行一些必要的函数

因为compile函数定义在level-one指令的指令对象里,所以它会被调用并传递一个element对象作为它的参数

如果你仔细观察,就会看到,浏览器创建这个element对象时,仍然是最原始的html标记

• 在ng中,原始dom通常用来标识template element,所以我在定义compile函数参数时就用到了tElem名字,这个变量指向的就是template element.

一旦运行levelone指令中的compile函数,244)">ng就会递归深度遍历它的level-two与level-three上面重复这些操作.

Post-link

深入了解pre-link函数之前,让我们来看看post-link函数.

• 如果你在定义指令的时候只使用了一个ng会把这个函数当成post-link来处理,因此我们要先讨论这个函数

当ng遍历完所有的dom并运行完所有的compile函数之后,就反向调用相关联的post-link函数.

dom现在开始反向,并执行调用看起来有点奇怪,其实这样做是非常有意义的.

当运行包含子指令的指令post-link时,反向的post-link规则可以保证它的子指令的post-link是已经运行过的.

// HERE THE ELEMENTS ARE STILL THE ORIGINAL TEMPLATE ELEMENTS

    // levelOne: compile function is called on original DOM
    // levelTwo: compile function is called on original DOM
    // levelThree: compile function is called on original DOM

    // AS OF HERE,THE ELEMENTS HAVE BEEN INSTANTIATED AND
    // ARE BOUND TO A SCOPE
    // (E.G. NG-REPEAT WOULD HAVE MULTIPLE INSTANCES)

    // levelOne: pre link function is called on element instance
    // levelTwo: pre link function is called on element instance
    // levelThree: pre link function is called on element instance

    // levelThree: post link function is called on element instance
    // levelTwo: post link function is called on element instance
    // levelOne: post link function is called on element instance@H_673_136@ 
   

@H_585_801@/**
@H_585_801@ * Compile function
@H_585_801@ * 
@H_585_801@ * @param tElem - template element
@H_585_801@ * @param tAttrs - attributes of the template element
@H_585_801@ */
    :rgb(0, tAttrs){

        // ...

    };@H_673_136@ 
   

 * Pre-link function
@H_585_801@ * @param scope - scope associated with this istance
@H_585_801@ * @param iElem - instance element
@H_585_801@ * @param iAttrs - attributes of the instance element
:rgb(64, iAttrs){

         Post-link 函数 
   
使用post-link函数来执行业务逻辑,在这个阶段,它已经知道它所有的子指令已经编译完成并且pre-link以及post-link函数已经执行完成.
 
   
这就是被认为是最安全以及默认的编写业务逻辑代码的原因.
 
   
scope实例以及element实例做为参数传递给post-link函数:
 
   
下面是函数样子
 
   
 
    
 * Post-link function@H_673_136@
@H_585_801@// ...

    }; 
    
   @H_874_51@ 总结 
   
现在你应该对compile,244)">post-link@H_673_136@