认识AngularJS Directive

指令（directive）是我们用来扩展浏览器能力的技术之一。在DOM编译期间，和html关联着的指令会被检测到，并且被执行。这使得指令可以为DOM指定行为，或者改变它的DOM结构。

1.在html中调用指令

指令遵循驼峰式命名，如ngModel(笔者在angular里试了试，这种不管用)。指令还可以通过使用指定符号转化成链式风格的名称来调用，特定符号包括：":"，"-"，"_"。还可以选择给指令加上前缀，比如"x-"，"data-"来让它符合html的验证规则。下面是可以用的指令名称例子：

ng:mode，ng-model，ng_model，x-ng-model，data-ng-model（这些可以用）。

指令可以作为元素名，属性名，类名，或者注释。下面是一些等效调用myDir指令的例子：

<span my-dir="exp"></span>
<span class="my-dir: exp;"></span>
<my-dir></my-dir>
<!-- directive: my-dir exp -->

 2.字符串替换式

在编译期间，编译器会用$interpolate服务去检查文本中是否嵌入里表达式。这些表达式会被注册为watches(监视器)，并且作为$disgest循环中的一部分，它会自动更新。下面是一个例子：

<img src="img/{{username}}.jpg">Hello {{username}}!</img>

 3.编译过程和指令匹配

html的编译分为三个阶段：

1).首先，通过浏览器的标准API，将html转换成DOM对象。这是很重要的一步，因为我们的模板必须可被解析（符合规范）的html。跟大多数模板系统做对比，它们一般是基于字符串的，而angular是基于DOM元素的。

2).对DOM的编译是通过$compile()方法完成的。这个方法会遍历DOM，并对指令进行匹配。如果匹配成功，那么将与对应的DOM一起，加入到指令列表中。一旦所有的指令都被确定里，会按照优先级被排列，并且他们的compile方法会被调用。指令的$compile()函数都能修改DOM结构，并且要负责生成一个链接（link）函数。$compile方法最后返回一个合并起来的链接函数，这些链接函数是每个指令的compile函数返回的链接函数的集合。

3).通过调用上一步所说的链接函数来将模板与作用域链接起来。这会轮流调用每个指令的链接函数，让每一个指令都能对DOM注册监听事件，和建立对作用域的监听。这样最后就形成里作用域的DOM的动态绑定。任何一个作用域的改变都会在DOM上体现出来。

下面用代码说明以上三步：

var $compile = ...; //angular编译器
var scope = ...;
var html = '<div ng-bind='exp'></div>';

// 第1步: 将HTML转换成DOM对象（element）
var template = angular.element(html);

// 第2步: 编译这个 template
var linkFn = $compile(template);

// 第3步: 链接函数将 template和scope.链接起来
linkFn(scope);