AngularJS中Directive指令系列 - 基本用法
参考：
https://docs.angularjs.org/api/ng/service/$compile
http://www.zouyesheng.com/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="http://google.com">Click me to go to Google</a></my-directive> <p my-directive=""><a href="http://google.com">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="http://google.com">Click me to go to Google</a> <a href="http://google.com" 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.
