为什么要用directive？
ng的directive从字面上理解就是ng框架的一个指令。
假如我们发现要写很多公共或是重用的dom、class、attr属性或是需要操作scope作用域，就要考虑代码最好不要copy、不要出现重复的代码段，好像是哪位大牛说的话，具体记不清了，反正就是为了性能优化等方面。
说的更专业点就是：
直接上代码：
<!DOCTYPE html> <html ng-app="nick"> <head> <Meta charset="UTF-8"> <title>nick directive</title> </head> <body> <hi></hi> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <script> var myModule = angular.module('nick',[]); myModule.directive('hi',function() { return { template: '<p>my name is nick</p>',replace: true,restrict: 'E',}; }); </script> </body> </html>
这就是我们常用的最简单的写法，其实有2种写法。
写法一：return写法（常用）
var myModule = angular.module();
myModule.directive('directiveName',function() {
return {
//内容
};
});
写法二：定义js域
var myModule = angular.module();
myModule.directive('directiveName',function() {
var myObj={
//内容
};
return myObj;
});
一般我们都是用第一种写法，下面以写法一为例：
var myModule = angular.module();
myModule.directive('directiveName',function() {
return {
priority: 0,template: '<p>nick</p>',templateUrl: 'nick.html',transclude: true,scope: false,controller:'someController',controllerAs:'mainController',compile: function compile(meElement,meAttrs,transclude) {
return {
pre: function preLink(scope,iElement,iAttrs,controller) {},post: function postLink(scope,controller) { }
}
},link: function postLink(scope,iAttrs) { }
};
});
这是我总结出目前directive最全的参数了。下面对参数进行一一介绍：
directiveName
自定义directive指令的名字，应该做到见名知义，方便调用。
priority
(Number)，可选参数（作为了解，使用几率极小）指明指令的优先级，当有多个directive定义在同一个DOM元素时，有时需要明确它们的执行顺序。这属性用于在directive的compile function调用之前进行排序。如果优先级相同，则执行顺序是不确定的（经初步试验，优先级高的先执行，同级时按照类似栈的“后绑定先执行”。另外，测试时有点不小心，在定义directive的时候，两次定义了一个相同名称的directive，但执行结果发现，compile或者link都执行）。
restrict
(String)可选参数,指明指令在DOM的声明形式；
取值：
- E(DOM元素)
- A(attr属性)
- C(class类)
- M(注释)
默认值为A；可以多个一起用，如EA.表示即可以是元素也可以是属性。
template(template和templateUrl二选一)
(Sting或Function) 可选参数，如果replace为true，则将模版内容替换当前的HTML元素，并将原来元素的属性、class一并迁移；如果为false，则将模版元素当作当前元素的子元素处理。
写法一：(Sting)
<!DOCTYPE html> <html ng-app="nick"> <head> <Meta charset="UTF-8"> <title>nick directive</title> </head> <body> <hi></hi> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <script> var myModule = angular.module('nick',function() { return { restrict: 'E',template: '<div><h1>Hi nick</h1></div>',replace: true }; }); </script> </body> </html>
写法二：(Fucntion)
虽然写法一为常用写法，但是写法二也应该了解。亲们，发现了么？写法二使用到了html中hi2标签的title属性。
templateUrl(template和templateUrl二选一)
(Sting或Function) 可选参数，如果replace为true，则将模版内容替换当前的HTML元素，并将原来元素的属性、class一并迁移；如果为false，则将模版元素当作当前元素的子元素处理。但模版通过指定的url进行加载。因为模版加载是异步的，所以compilation、linking都会暂停，等待加载完毕后再执行。
注意：
在本地开发时候，需要运行一个服务器，不然使用templateUrl会报错 Cross Origin Request Script（CORS）错误。由于加载html模板是通过异步加载的，若加载大量的模板会拖慢网站的速度，这里有个技巧，就是先缓存模板你可以再你的index页面加载好后，将下列代码作为你页面的一部分包含在里面。
<!DOCTYPE html> <html ng-app="nick"> <head> <Meta charset="UTF-8"> <title>nick directive</title> </head> <body> <hi></hi> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <script type="text/javascript"> var app = angular.module('nick',[]); app.directive('hi',templateUrl: 'hi.html',replace: true }; }); </script> <script type='text/ng-template' id='hi.html'> <div><h1>Hi nick</h1></div> </script> </body> </html>
replace
(Boolean)，默认值为false，设置为true时候，hi这个标签不在了，反之，则存在。这里比较简单，就不上代码了。
