1.指令是什么

第一：指令就是DOM元素的标记（如属性、元素名、注释或CSS类名）
第二：让编译器（compiler）给dom元素附加指定的行为或转换（DOM元素的crud）

angular有许多内置的指令，ngbind，ngModel，ngClass，很像控制器和服务，你也可以创建自己的。
当angular引导你的程序的时候，Compiler会遍历DOM树去匹配指令并将指令的功能附加到DOM元素。

编译语言：
c，C++这些编译代码为汇编或二进制代码的语言。

2.匹配指令

在我们写指令前我们首先要知道angular的compiler怎么决定何时使用指定的指令。

和元素选择器很类似，当指令是他声明的一部分，我们可以说一个元素匹配一个指令。

下边这些都匹配了ng-model

 <input ng-model="foo">
 <input data-ng-model="foo">

下边的指令匹配 person
<person>{{name}}</person>

3.指令名称的规范化

angular规范了标签和属性名，通过这些，决定了哪个元素匹配了哪个指令。
一般通过区分大小写的驼峰命名法来引用指令。然而，因为HTML是不区分大小写的，
我们在DOM中引用指令通过小写的格式，一般在DOM元素上用横线分割。（ng-model）。
规范化的过程：

1. 抽掉 x- 和 data- 从元素或属性前面
2. 用“:”,“-”或“_”方法替代驼峰命名法

 下边例子中ngbind的命名的是等价的

 <div ng-controller="Controller">
   Hello <input ng-model='name'> <hr/>
   <span ng-bind="name"></span> <br/>
  <span ng:bind="name"></span> <br/>
   <span ng_bind="name"></span> <br/>
   <span data-ng-bind="name"></span> <br/>
   <span x-ng-bind="name"></span> <br/>
 </div>
 建议使用'ng-bind'，若使用HTML验证工具建议用'data-ng-bind'的形式。其他的形式是历史遗留问题。

4.指令类型

编译器可以基于元素名、属性、类名和注释来匹配指令。
下面是MyDir的四种方法：

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

一般推荐使用标签名或属性

5.创建指令

首先看一下怎么注册指令。和控制器一样，指令也是注册在modules上面。
使用module.directive创建指令。
directive接受两个参数:
第一个是规范化的指令名称；
第二个是factory方法。

这个工厂方法返回一个对象，这个对象上面有很多选项。这些选项告诉了编译器怎么匹配的元素增加行为。

这个工厂方法只在第一次compiler匹配到的时候调用（inovke）。
你可以在这里面处理一些初始化的方法。这个函数被$injector.invoke调用注入。

最佳实践：
最好定义一些不容易冲突的指令名。例如，angular的内置变量都以ng开头。

6.模板扩展指令

如果你有一块模板表示信息，出现了很多次。并且，当你在一个地方写改的时候，
其他的地方都需要修改。这种情况用指令可以加大简化你的代码。

compiler除了编译某个指令外，还会编译指令模板里面的子指令。

最佳实践：
除了html文件小，最好还是拆分为html模板，用templateUrl去引用。

templateUrl也可以是函数，第一个参数是ele，第二个参数是属性。

restrict 有四个值：
‘A’，‘E’，‘C’，‘M’。

最佳实践：
标签名用在类似 dialog这种指令里。属性用在类似 drag这样的指令中。

7.隔离的指令作用域

传统做法，每个指令都需要在外面包一个controller来提供scope；现在，

我们想要一个内外分离的，外部映射到内部的scope。
我们用 isolate scope来实现这个功能。
我们用scope属性实现。

isolate scope隔离了除了映射进来的 所有的外部scope。
这样对构建可重用的组件很有用。

scope是原型继承的。
想重建可重用的组建的时候，要用scope属性。

8.创建一个操作DOM的指令

一般通过link这个选项，来让指令监听和操作DOM。
link在模板clone后执行，指令的逻辑都放在这里。

link 函数这样用
function link(scope,element,attrs,controller,transcludeFn) { ... }
scope:
element: 指令匹配的那个jqLite包裹的元素。
attrs: 属性
controller:
transcludeFn:

directive 和 controller一样，都可以使用依赖注入。

angular自己可以触发一些事件。当angular的compiler编译的元素销毁的时候，
他就触发了一个 $destory事件。和scope很类似，当scope销毁的时候，他就会广播一个$destory事件。

通过监听$destory事件，你可以手动删除一个事件监听，防止内存泄漏。
当scope和element销毁的时候，注册到scope 和 element上面的回调函数可以自动清除。
如果在服务上注册了一个回调函数，或在没有删除DOM节点上注册一个监听器,你需要手动清除以防内存泄漏。

9.创建一个包含其他元素的指令

transclude选项改变scope嵌入的方式。指令中的内容直接引用指令外的scope，而不是内部的。
有了它，就可以访问外部的scope。
transclude属性对那些包裹随机内容的指令很有用。因为，只有这样他才不用处理每一个内嵌内容需要的model。

最佳实践：
transclude: true，当你创建一个需要包裹随机内容的指令的时候。

&attr 适合向外映射一个行为，也就是方法。
=attr 映射一个字符串或对象。
通过向外映射方法，向外传递数据。

10.创建一个事件监听指令

通过link来添加事件和操作DOM

11.创建一个交流用途的指令

require
^^{这个前缀意味着：指令搜寻父元素的控制器。（一个}，在自己或父亲上面查找控制器。一个也没有，在自己上面找）
controller选项可以获取controller。

当一个指令需要控制器的时候，link里面的第四个参数就是这个控制器。
如果require多个控制器，那么第四个参数就是控制器的数据。

link和controller的关系：
controller可以暴露API接口方法。
link函数可以和controller交互，当有require的时候。

最佳实践：
当你想暴露接口的时候，用controller