参考：
/api/ng/service/$compile
/angular.html
Directive (指令)，是Angular最为强大和复杂的部分。directive可以扩展丰富html的行为。
举个例子，如果我们想让html某元素在屏幕上居中显示，我们无需知道屏幕窗口实际的宽度，只需加上align="center"属性就能达到目的。
这是html提供给我们好的接口行为。但是如果想要元素在屏幕的1/3位置显示，这就有些困难了。因为html并没有提供给我们这种语法。
我们可以通过directive定义一些新的行为，然后让Angular提供的HTML compiler(编译器)去解析并编译行为。更进一步，当我们开发应用系统，我们甚至可以为该应用创建特定的directive。
即Domain Specific Language 领域特定语言。
使用指令可以增强复用性。节省很多代码。
定义指令可以使用下面的写法模板
var myModule = angular.module(...);myModule.directive('directiveName', function factory(injectables) {var directiveDefinitionObject = {priority: 0,template: '<div></div>',templateUrl: 'directive.html',replace: false,transclude: false,restrict: 'A',scope: false,compile: function compile(tElement, tAttrs, transclude) {return {pre: function preLink(scope, iElement, iAttrs, controller) { ... },post: function postLink(scope, iElement, iAttrs, controller) { ... }}},link: function postLink(scope, iElement, iAttrs) { ... }};return directiveDefinitionObject;});
由上可知，定义指令，需要返回一个对象。对象中包含很多属性如restrict，replace等。下面根据例子介绍每个属性的用法。
例1
See the Pen 1. basic by finley (@mafeifan) on CodePen.
如下有两个指令，分别是元素类型和属性类型。
<my-directive><a href="">Click me to go to Google</a></my-directive><p my-directive=""><a href="">Click me to go to Google</a></p>
生成的html都是超链接。
参数restrict：个人理解指令的使用方式。可选值EACM。分别代表element，attribute，class和comment。
E 元素方式 <my-directive></my-directive>A 属性方式 <div my-directive="exp"> </div>C 类方式 <div class="my-directive: exp;"></div>M 注释方式 <!-- directive: my-directive exp -->
参数template：要替换的内容。
参数templateUrl：从指定的url读模版内容，如果内容很长或者需要复用就用这个参数吧。比如我们可以写成
templateUrl : "../myTemplate.html" // 或者动态获取templateUrl: function(element, attrs) {return attrs.templateUrl || '../../uib/template/alert/alert.html';},
参数replace：是否使用模板内容替换掉整个节点， true 替换整个节点， false 替换节点内容。如例1，若replace为true。则生成的html结构如下：
<a href="">Click me to go to Google</a><a href="" my-directive="">Click me to go to Google</a>
参数link：
例2 link方法
See the Pen Directive/2 link by finley (@mafeifan) on CodePen.
参数scope：绑定策略
参数compile和link。分别代表编译和链接。
例3 绑定
如下TestCtrl里div元素有4个属性。a,abc,xx,c
<body ng-app="myApp"><div ng-controller="TestCtrl"><div a abc="here" xx="{{ a }}" c="ccc"></div></div></body>
JS
angular.module('myApp',[]).controller('TestCtrl', function($scope){$scope.a = '123';$scope.here = 'here ~~';}).directive('a', function(){var func = function(element, attrs, link){return function(scope){/** 输出结果a: "here"b: "123"c: "ccc"d: "ccc"e: "here ~~*/console.log(scope);};};return {restrict: 'A',compile: func,
// a 找到属性名为abc，其值为here
// b 找到属性名为xx，其值为{{a}} 接着找$scope.a 存在，其值为 123
// c @attrName 没有写attrName, 默认取自己的值,等价于@c ,找到属性c，其值为ccc
// d 如上
// e '=abc' 把属性abc的值当作scope的属性名。 这里存在属性abc，其值为here。存在$scope.here。最终值为'here ~~'
// 若改为abc={{ here }} 效果跟 b: '@xx'一样
scope: {a: '@abc', b: '@xx', c: '@', d: '@c', e: '=abc'}};});
例4 transclude
See the Pen NG Directive学习4 transclude by finley (@mafeifan) on CodePen.
