Directive是教HTML玩一些新把戏的途径。在DOM编译期间，directives匹配HTML并执行。这允许directive注册行为或者转换DOM结构。
Angular自带一组内置的directive，对于建立Web App有很大帮助。继续扩展的话，可以在HTML定义领域特定语言（domain specific language ,DSL)。
一、在HTML中引用directives
Directive有驼峰式（camel cased）的风格的命名，如ngBind（放在属性里貌似用不了~）。但directive也可以支蛇底式的命名（snake case），需要通过:（冒号）、-（减号）或_（下划线）连接。作为一个可选项，directive可以用“x-”或者“data-”作为前缀，以满足HTML验证需要。这里列出directive的合法命名：
ng:bind
ng-bind
ng_bind
x-ng-bind
data-ng-bind
Directive可以放置于元素名、属性、class、注释中。下面是引用myDir这个directive的等价方式。（但很多directive都限制为“属性”的使用方式）
<span my-dir="exp"></span> <span></span> <my-dir></my-dir> <!-- directive: my-dir exp -->
Directive可以通过多种方式引用，下面列出N种等价的方式：
<!DOCTYPE HTML>
<html lang="zh-cn" ng-app>
<head>
<meta charset="UTF-8">
<title>invoke-directive</title>
<style type="text/css">
.ng-cloak {
display: none;
}
</style>
</head>
<body>
<div ng-controller="MyCtrl">
Hello <input ng-model="name"/><hr/>
ngBind="name" 这个用不了~~ <span ngBind="name"></span><br/>
ng:bind="name"<span ng:bind="name"></span><br/>
ng_bind="name"<span ng_bind="name"></span><br/>
ng-bind="name"<span ng-bind="name"></span><br/>
data-ng-bind="name"<span data-ng-bind="name"></span><br/>
x-ng-bind="name"<span x-ng-bind="name"></span><br/>
</div>
<script src="https://www.jb51.net/angular-1.0.1.js" type="text/javascript"></script>
<script type="text/javascript">
function MyCtrl($scope) {
$scope.name = "beauty~~";
}
</script>
</body>
</html>
二、String interpolation
在编译过程中，compiler通过$interpolate服务匹配文本与属性中的嵌入表达式（如{{something}}）。这些表达式将会注册为watches，并且作为digest cycle(之前不是digest-loop吗？！)的一部分，一同更新。下面是一个简单的interpolation：
<img src="https://www.jb51.net/img/{{username}}.jpg"/>Hello {{username}}!
三、Compilation process, and directive matching
HTML“编译”的三个步骤：
1. 首先，通过浏览器的标准API，将HTML转换为DOM对象。这是很重要的一步。因为模版必须是可解析（符合规范）的HTML。这里可以跟大多数的模版系统做对比，它们一般是基于字符串的，而不是基于DOM元素的。
2. 对DOM的编译（compilation）是通过调用$comple()方法完成的。这个方法遍历DOM，对directive进行匹配。如果匹配成功，那么它将与对应的DOM一起，加入到directive列表中。只要所有与指定DOM关联的directive被识别出来，他们将按照优先级排序，并按照这个顺序执行他们的compile() 函数。directive的编译函数（compile function），拥有一个修改DOM结构的机会，并负责产生link() function的解析。$compile()方法返回一个组合的linking function，是所有directive自身的compile function返回的linking function的集合。
3. 通过上一步返回的linking function，将模版与scope连接起来。这反过来会调用directive自身的linking function，允许它们在元素上注册一些监听器（listener），以及与scope一起建立一些watches。这样得出的结果，是在scope与DOM之间的一个双向、即时的绑定。scope发生改变时，DOM会得到对应的响应。
var $compile = ...; // injected into your code
var scope = ...;
var html = '<div ng-bind='exp'></div>';
// Step 1: parse HTML into DOM element
var template = angular.element(html);
// Step 2: compile the template
var linkFn = $compile(template);
// Step 3: link the compiled template with the scope.
linkFn(scope);
四、Reasons behind the compile/link separation
在这个时候，你可能会想知道为什么编译进程会划分为compile和linke两个步骤。为了明白这一点，让我们看看一个真实的例子（repeater）
Hello {{user}}, you have these actions: <ul> <li ng-repeat="action in user.actions">{{action.description}}</li> </ul>
简单地讲，之所以分开compile和linke两步，是因为有时候需要在model改变后，对应的DOM结构也需要改变的情况，如repeaters。