angular 自定义指令中 link，compile函数用法

 link 函数。 它有三个参数：

• scope – 指令的scope。在我们的例子中，指令的scope就是父controller的scope。
• elem – 指令的jQLite(jQuery的子集)包装DOM元素。如果你在引入AngularJS之前引入了jQuery，那么这个元素就是jQuery元素，而不是jQLite元素。由于这个元素已经被jQuery/jQLite包装了，所以我们就在进行DOM操作的时候就不需要再使用 $()来进行包装。
• attr – 一个包含了指令所在元素的属性的标准化的参数对象。举个例子，你给一个HTML元素添加了一些属性：，那么可以在 link 函数中通过 attrs.someAttribute 来使用它。
• link: function(scope, elem, attrs) {
        elem.bind('click', function() {
          elem.css('background-color', 'white');
          scope.$apply(function() {
            scope.color = "white";
          });
        });
        elem.bind('mouseover', function() {
          elem.css('cursor', 'pointer');
        });
      }

使用jqlite中无法取到的元素，原生js取到dom，再用angular.element（）转换为jqlite对象

var par = document.getElementsByTagName('p')[0];
angular.element(par).addClass('blue');

link函数主要用来为DOM元素添加事件监听、监视模型属性变化、以及更新DOM。

 

 

 

compile函数

compile 函数在 link 函数被执行之前用来做一些DOM改造。它接收下面的参数：

• tElement – 指令所在的元素
• attrs – 元素上赋予的参数的标准化列表

要注意的是 compile 函数不能访问 scope，并且必须返回一个 link 函数。但是如果没有设置 compile 函数，你可以正常地配置 link 函数，（有了compile，就不能用link，link函数由compile返回）。compile函数可以写成如下的形式：

1 2 3 4 5 6 7 8 9 10

app.directive('test', function() {   return {     compile: function(tElem,attrs) {       //do optional DOM transformation here       return function(scope,elem,attrs) {         //linking function here       };     }   }; });

大多数的情况下，你只需要使用 link 函数。这是因为大部分的指令只需要考虑注册事件监听、监视模型、以及更新DOM等，这些都可以在 link 函数中完成。 但是对于像 ng-repeat 之类的指令，需要克隆和重复 DOM 元素多次，在 link 函数执行之前由 compile 函数来完成

原文地址 ： http://blog.jobbole.com/62249/