Directive，可以封装很多公共指令，比如分页指令、自动补全指令等等。然后在HTML页面里只需要简单的写一行代码就可以实现很多强大的功能。一般情况下，需要用Directive有下面的情景：
1. 使你的Html更具语义化，不需要深入研究代码和逻辑即可知道页面的大致逻辑。
2. 抽象一个自定义组件，在其他地方进行重用。
从一个实例开始：
1 index.html //通过把鼠标移入，添加一个样式，移除就去掉样式。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>directive</title> <link rel="stylesheet" href="css/foundation.css"> </head> <body> <div ng-app="app">
<div enter leave>I,m here</div> <hello></hello> </div> </body> <script src="js/angular.min.js"></script> <script src="js/app.js"></script> </html>
2 index.js
var app=angular.module('app',[]);
app.directive('enter',function(){
return function(scope,element,attrs){
element.bind('mouseenter',function(){
element.addClass('alert-box');
})
}
})
app.directive('leave',function(){
return function(scope,element,attrs){
element.bind('mouseleave',function(){
element.removeClass('alert-box');
})
}
})
app.directive('hello',function(){
var el = angular.element('<div><input ng-model="txt"></div><div>{{txt}}</div>');
return {
restrict:'E',
template:el,
link:function(scope,element){
scope.$watch('txt',function(newVal){
if(newVal === 'error'){
element.addClass('alert-box alert')
}
})
}
}
})
实例中为简写：因为该指令第二个参数里默认为：A.
下面引入一个完整版directive：贴一下这8个指令的意思与用法（参考自angularjs权威指南一书）。
1.restrict
指明指令在DOM里面以什么形式被声明；
E(元素),A(属性),C(类),M(注释)，其中默认值为A；当然也可以两个一起用，比如EA.表示即可以是元素也可以是属性。
2.priority
指明指令的优先级，若在单个DOM上有多个指令，则优先级高的先执行；
3.terminal
可以被设置为true或false，若设置为true，则优先级低于此指令的其他指令则无效，不会被调用(优先级相同的还是会执行)
4.template 可以是：任何HTML文本段 也可以是一个函数，该函数有两个参数，第一个为：使用此指令的元素，第二个则为实例的属性，它是一个由元素上所有的属性组成的集合（对象）。
5.templateUrl（字符串或者函数），可选参数，可以是
（1）一个代表HTML文件路径的字符串
（2）一个函数，可接受两个参数tElement和tAttrs（大致同上）
6.replace
（布尔值），默认值为false，设置为true时候，我们再来看看下面的例子
7.scope
（1）默认值false。表示继承父作用域;
（2）true。表示继承父作用域，并创建自己的作用域（子作用域）;
（3）{}。表示创建一个全新的隔离作用域；
8.transclude
如果不想让指令内部的内容被模板替换，可以设置这个值为true。默认值为false；
完整例子为：
var myModule = angular.module(...);
myModule.directive('directiveName', function factory(injectables) {
var directiveDefinitionObject = {
priority: 0,
template: '<div>hello</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;
});
