angular中的compile和link函数

angular中的compile和link函数

前言

这篇文章，我们将通过一个实例来了解 Angular 的 directives （指令）是如何处理的。Angular 是如何在 HTML 中找到这些 directive 的。以及如何编写自定义的指令。

这是原文提供的代码：http://www.angularjshub.com/examples/customdirectives/compilelinkfunctions/#top

更加友好的排版：http://blog.wangtuyao.com/post/2014/7/2/compile-and-link-function-in-angular

Initialization, compilation 和 linking 阶段

当 Angular 从 HTML 中解析 directive 的时候，我们每个 directive 的解析可以大致分为 3 步。

initialization ：这个阶段是 Angular 在 DOM 遍历的时候第一次发现 directive 的时候执行。（它只会发生一次，即便是在 DOM 中出现了多次）initialization 允许 directive 做一些初始化的工作。

compilation ：这个阶段 Angular 遍历 DOM ，并且收集所有的 directive 。所有 directive 都可以在这个阶段操作 DOM（在这个阶段，同一个 directive 在不同的 DOM 节点如果中出现了多次，compilation 将会执行多次）这个阶段 scope 是还没有被附加上去，所以是无法访问到 scope 的。

linking ：这个阶段的 DOM 节点，Angular 会把所有 directive 的事件监听器（event listeners）注册到 DOM 中，建立对 scope 的监听。并且把一个 scope 附加到 directive 中。这整个阶段是在 compilation 之后进行的。如果想要访问 scope 就可以在这个阶段进行。

创建自定义 directive

我们可以通过 Angular 中提供的 directive 创建自定义的指令。

directive(name, directiveFactory);

方法提供了两个参数，第一个为 directive 的名字，第二个是一个工厂方法。

在 HTML 中指定来引用一个指令有多种方法，查看更多内容。directive 的命名说有几种约定的规则：

使用驼峰式命名，首字母小写。

HTML 中使用小写字符加横线的方式。

例如：directive 的名称为 myCustomDir 所有 HTML 中引用为 my-custom-dir;

Compile 和 link function

上文讲了 initialization, compilation 和 linking 阶段，现在来看一下 directive 是如何执行的。这是一个最为复杂的例子，这个例子包含了 directive 处理的所有阶段。

myModule.directive("myCustomDir", function ()
  {
    // Initialization
    // ...
    // Definition object
    return {
      // Compile function
      compile: function (element, attrs)
      {
        // ...
        return {
          // Pre-link function
          pre: function (scope, element, attrs)
          {
            // ...
          },
          // Post-link function
          post: function (scope, element, attrs)
          {
            // ...
          }
        };
      }
    };
  });

第一个参数表示 directive 的名字，第二个参数表示 directive 的工厂方法，返回一个对象。这个对象可以包含多个属性，查看更多。这里我们只关注compile 属性。compile 对应了一个 compile function ，这个方法返回一个包含 pre 和 post 属性的对象。为了能更好的理解情况下图：

假如我们定义了如下的自定义的 directive dir1，dir2，dir3 和 dir4 ，Angular 又是如何处理的呢

<... dir1 ...>
  <... dir2 dir3 ...>
    <... dir4 dir1 ...>
    </...>
  </...>
</...>

initialization 和 compilation 阶段将会在第一次遍历 DOM 的时候发生。这里是处理过程：

DOM 第一次遍历的时候，dir1 将会首先被发现。所以 dir1 的 initialization 将会首先执行，紧接着的是 dir1 的 compilation 。

在第一个 DOM node 处理完后，接着会处理这个 node 的子 node，这里就是 dir2 , dir3；dir2 和 dir3 是 DOM 第一次遍历到，所以initialization 部分和 compilation 部分会依次调用；

接下来处理 dir2 和 dir3 的子 node，这里包含了 dir4 和 dir1 。因为 dir1 在第一步的时候已经 initialization 过，所以不会再次执行，但是 dir4 还是会调用 initialization 因为它是 DOM 第一次遍历到。所有的 directive 都会在 initialization 后调用 compilation。

如果 html 中还有其他的 DOM 树，处理过程也是类似的，以同样的方式从上到下遍历 DOM 树，如果有 DOM 节点存在着子节点，每个字节点都将会被依次遍历后再进入下一个节点。这个过程结束之后，initialization 和 compilation 的处理也结束了。directive 将会被替换，最终版本的 DOM 树将会呈现出来。

接下来的处理过程是 linking。这个过程有可以细分为 pre-linking 和 post-linking。由于 Angular 使用 depth-first 方式遍历 DOM 树。所以 angular 首先访问到的是 pre-linking ，当所有 pre-linking 执行完毕后，DOM 遍历进入到一个“回溯”（backtracking ）阶段的时候所有的 post-linking 才执行。在 pre-linking 函数做DOM 的转换时不安全的（pre-linking 的执行是在节点的子节点还未执行link，意思是：在某一个节点执行 pre-linking 的时候，这个节点的子节点还未进行 link），在post-linking 阶段才是安全的。

自定义指令申明 compile 和 link 函数的几种方式

上文，我们已经知道了一种方式在一个模块中创建一个指令，并且这是一种最复杂的方式，因为我们既需要访问 compile ，pre-link，和 post-link，但是通常情况下我们不需要全部，我们可以根据需求选择不同的函数。我们开看一下几种方式（代码请看上面的链接）：

1.不定义对象

我们可以简单的 Post-link 后，不定义对象返回。这是在例 1. 所示。

myModule.directive("myCustomDir", function ()
{
  // Initialization
  // ...
  // Post-link function
  return function (scope, element, attrs)
  {
    // ...
  };
});

2.定义一个对象和只定义一个 post-link 函数

定义对象后返回 post-link 函数，如例 2.所示：

myModule.directive("myCustomDir", function ()
{
  // Initialization
  // ...
  // Definition object
  return {
    // Post-link function
    link: function (scope, element, attrs)
    {
      // ...
    }
  };
});

3.定义一个对象和定义 post-klink 和 pre-link

返回一个对象，这个对象有一个 link属性，这个 link 属性又包含一个 pre 和 post 属性的对象，分别对应 pre-link 函数和 post-link 函数。如实例 3.所示：

myModule.directive("myCustomDir", function ()
{
  // Initialization
  // ...

  // Definition object
  return {
    link: {
      // Pre-link function
      pre: function (scope, element, attrs)
      {
        // ...
      },
      // Post-link function
      post: function (scope, element, attrs)
      {
        // ...
      }
    }
  };
});

4.定义一个对象和只定义 compile 函数

返回一个对象，包含 compile 属性，对应 compile 函数，如例 4. 所示：

myModule.directive("myCustomDir", function ()
{
  // Initialization
  // ...

  // Definition object
  return {
    // Compile function
    compile: function (element, attrs)
    {
      // ...
    }
  };
});

5.定义一个对象和定义 compile 和 post-link 函数

myModule.directive("myCustomDir", function ()
{
  // Initialization
  // ...

  // Definition object
  return {
    // Compile function
    compile: function (element, attrs)
    {
      // ...

      // Post-link function
      return function (scope, element, attrs)
      {
        // ...
      };
    }
  };
});

6.定义一个对象和 compile，pre-link 和 post-link 函数

最后一种方式，如例 6.所示

myModule.directive("myCustomDir", function ()
{
  // Initialization
  // ...

  // Definition object
  return {
    // Compile function
    compile: function (element, attrs)
    {
      // ...

      return {
        // Pre-link function
        pre: function (scope, element, attrs)
        {
          // ...
        },
        // Post-link function
        post: function (scope, element, attrs)
        {
          // ...
        }
      };
    }
  };
});

前一篇博文中的代码作为一个完整的directive示例：

angular.module('demo', [])

.controller('demoController',['$scope',function($scpoe){
$scpoe.rating=52;

}])

.directive('rnStepper', function() {
    return {
        restrict: 'AE',
        require:'ngModel',/*使用属性模式调用，依赖了ngModel指令*/
        scope:{},
        template: '<button ng-click="decrement()">-</button>' +
                  '<div></div>' +
                  '<button ng-click="increment()">+</button>',
        //link函数可以接受require指令的controller，ngModelController
        link:function(scope,element,attrs,ngModelController){

          //利用ngModel指令的controller我们可以利用他的方法很多事情
          ngModelController.$render=function(){
                element.find('div').text(ngModelController.$viewValue);
          };
          function updateModel(offset){
            ngModelController.$setViewValue(ngModelController.$viewValue+offset);
            ngModelController.$render();
          };
          scope.decrement=function(){
            updateModel(-1);
          };
          scope.increment=function(){
            updateModel(1);
          };
        }
    };
});

compile 和 link 的参数

我们已经了解了在自定义指令中定义 compile 和 link 函数。现在来看一下 compile 和 link 的参数。

Angular 使用了一种内置的、轻量级的 jQuery，称为 jqLite 来操作和查询 DOM。但如果页面中同时有 jQuery 存在，那么 Angular 会用 jQuery 替换掉内置的 jqLite。

compile 函数的签名如下：

function (element, attrs)

element : 表示被编译后的、包含了 DOM 节点的 jqLite\jQuery 对象（如：如果 directive 是一个 div 元素，那么 element 是一个 jqLite\jQuery 包装的对象）。

attrs: attrs 是一个对象。这个对象的每一个属性代表着 Node 中的每一个同名属性。（如：Node 中有一个 my-attribute 属性，那么就可以通过 attrs.myAttribute 来获取该属性的值）

link 函数的签名如下：

function (scope, element, attrs)

scope: directive 的 scope；

element: 和 compile 函数的 element 参数相同；

attrs: 和 compile 函数中的 attrs 参数相同

Reference

http://www.angularjshub.com/examples/customdirectives/compilelinkfunctions/

http://www.cnblogs.com/wangtuyao/p/compile-and-link-function-in-angular.html

http://blog.wangtuyao.com