Angular的Directive，以及copmile和link方法

转载于： http://blog.csdn.net/u012258564/article/details/73865147

Directive，指令

在Angular中，是指嵌套在HTML模板中的指令，如Angular自带的ng-app ng-controller等，自带指令使用ng-前缀，自定义指令请避免使用。

指令的声明形式

HTML标签元素指令，HTML标签属性指令，Class类指令和HTML注释指令。

其中一般常用的为指令标签和属性标签。

简单的Directive定义

app.directive("myDirective", function() {
  return {
    restrict: "A",
    templateUrl: "context.html",
    replace: true
  }
})

其中，

• restrict指定指令的声明形式

A表示标签属性指令，如 <my-directive> </my-directive>

E表示标签元素指令，如<div my-directive></div>

Class(C)和注释(M)两种形式请避免使用。

同时支持多种声明形式，可以写为”EA”

如果省略，系统默认为“A”。

<ul><li><span style="font-family: Arial, Helvetica, sans-serif;">templateUrl</span></li></ul>

指令标签内容的模板URL。对于简单的模板，也可以使用template，直接写模板内容。

• replace

表示指令产生的内容是否会替换整个标签，还是插入到标签的内容。

指令命名规范

指令定义时，需要使用驼峰格式命令，如myDirective。

HTML中引用指令时，需要把驼峰命名进行拆分，可以采用多种方式，如

1. 冒号：my:directive
2. 横线：my-directive（推荐）
3. 下划线：my_directive
4. x-前缀
5. data-前缀

推荐使用横线的形式。

指令中的compile和link

以上示例的Directive非常的简单，只是替换一个模板，这样简单的功能完全可以使用ng-include直接嵌入模板的内容。

如果需要给Directive自定义事件或则用程序生成模板，该如何实现呢。这里，就需要用到compile和link函数了。

基于性能的考虑，Angular中，模板的处理过程分为compile和link两个阶段，Directive也会在这两个阶段分别进行处理。

compile阶段：compile阶段主要是对模板内容的处理，可以对模板内容进行修改，如ng-repeat就是在compile阶段执行的。

link阶段：link阶段主要对模板进行数据绑定和事件绑定等操作。

compile阶段

compile阶段会把HTML片段转换为DOM对象，在compile方法中对DOM进行操作。
模仿ng-repeat指令，开发一个my-repeat指令，对子元素重复指定的次数。

先看下compile函数的定义。

function compile(element, attrs, transclude) { ... }

element为指令所在的DOM对象，attrs为元素的属性字典，其他参数暂时未用到，可查看API。

app.directive('myRepeat', function($document) {
  return {
    restrict: 'A',
    compile: function(element, attrs) {
      var template = $(element).children().clone();
      for(var i=0; i<attrs.myRepeat; i++) {
        $(element).append(template.clone());
      }
    }
  }
});

<ul my-repeat="5">
  <li>Hello, my Repeat</li>
</ul>

link阶段

link阶段主要是对元素绑定scope数据和进行事件绑定。

function link(scope, element, attrs, controller) { ... }

scope为模板的作用域数据，其他参数名称自解释。

以一个密码框失去焦点时调用函数进行密码复杂度校验的指令为例。

app.directive('myBlur', function($document) {
  return {
    link: function(scope, element, attrs) {
      $(element).bind('blur', function(e){
         scope.$apply(attrs.myBlur);
      });
    }
  }
})

<input type="password" ng-model="password" my-blur="checkComplex()" />

其中checkComplex为controller中的方法。

在Directive中compile和link函数不能同时出现，如果定义了compile函数，则会忽略link函数。

如果compile后要对数据进行绑定事件，则compile的返回值就定义为link函数。在link阶段，会调用compile的返回值作为link函数。

        </div>