指令（Directives）是所有AngularJS应用最重要的部分。尽管AngularJS已经提供了非常丰富的指令，但还是经常需要创建应用特定的指令。
说到AngularJS，我们首先想到的大概也就是双向数据绑定和指令系统了，这两者也是AngularJS中最为吸引人的地方。双向数据绑定呢，感觉没什么好说的，那么今天我们就来简单的讨论下AngularJS这个框架的指令系统，本人也是初学，查阅了一些资料，要是有一些说的不好的地方，万望指出。
指令作为AngularJS中最为重要的部分，所以这个框架本身也是自带了比较多的的指令，但是在开发中，这些指令通常不能满足我们的需要，所以我们也是需要自定义一些指令的。那么一个AngularJS指令在HTML代码中可以有四种表现形式：
1、作为一个新的HTML元素来使用。
<hello></hello>或者<hello/></div>
2、作为一个元素的属性来使用
<div hello></div></div>
3、作为一个元素的类来使用
<div class="hello"></div></div>
4、作为注释来使用
<!--directive: hello --></div>
注意这里有一个陷阱，就是在“directive: hello”这个的后面要有一个空格，不然的话是没有效果的，同时推荐注释的方法的还是少用，如果非要追求高大上，那就随性吧。既然指令有以上四种表现形式，那么具体他是怎么来定义的呢？
.directive('hello',function(){
return {
restrict:'AECM',
template:'<button>click me</button>'
}
})
</div>
上面就是定义一个指令最简单的代码了，没有之一。在上面的代码中，directive()这个方法定义了一个新的指令，该方法有两个参数，第一个'hello'就是规定指令的名字为hello，第二个参数是返回指令对象的函数。那么在上面的代码中，该函数主要使用了两个属性来定义这个hello指令：
1、restrict[string]这个属性，主要是用来规定指令在HTML代码中可以使用什么表现形式。A代表属性、E代表元素、C代表类、M代表注释。实际情况中我们一般使用AE这两种方式。
2、template[string or function]这个属性，规定了指令被Angular编译和链接（link）后生成的HTML标记，这个属性可以简单到只有一个HTML文本在里面，也可以特别复杂，当该属性的值为function的时候，那么该方法返回的就是代表模板的字符串，同时也可以在里面使用{{}}这个表达式。
template: function () {
return '<button>click me</button>';
}
</div>
但是在一般情况下，template这个属性都会被templateUrl取代掉，用它来指向一个外部的文件地址，所以我们通常把模板放在外部的一个HTML文件中，然后使用templateUrl来指向他。
在定义指令的时候，除了以上两个最基础的属性外，我们还会使用到其他的很多属性，那么下面我们就来一一的说下：
1、priority[number]属性，这个属性是来规定自定义的指令的优先级的，当一个DOM元素上面有一个以上的指令的时候，就需要去比较指令的优先级了，优先级高的指令先执行。这个优先级就是用来在执行指令的compile函数前，先排序的，那么关于compile这个函数，我们会在下面仔细的说下。
2、terminal[boolean]属性，该参数用来定义是否停止当前元素上比本指令优先级低的指令，如果值为true，就是正常情况，按照优先级高低的顺序来执行，如果设置为false，就不会执行当前元素上比本指令优先级低的指令。
3、replace[boolean]属性，这个属性用来规定生成的HTML内容是否会替换掉定义此指令的HTML元素。当我们把该属性的值设为true的时候，打开控制台看看你会发现这个指令生成的元素会是这样的：
当我们设置为false的时候会是这样的：
。
4、link[function]属性，在上面的例子中，我们自定义的指令其实没有多大意义，这只是一个最简单的指令，有好多的属性我们都没有为他定义，所以没有多大用途。比如这个link函数，它包括三个参数：scope、element、attrs。这个link函数主要是用来添加对DOM元素的事件监听、监视模型属性变化、以及更新DOM的。它里面三个参数：
一：scope参数，在我们没有为指令定义scope属性的时候，那么他代表的就是父controller的scope。
二：element参数，就是指令的jQLite(jQuery的子集)包装DOM元素。如果你在引入AngularJS之前引入了jQuery，那么这个元素就是jQuery元素，而不是jQLite元素。由于这个元素已经被jQuery/jQLite包装了，所以我们就在进行DOM操作的时候就不需要再使用 $()来进行包装。
三：attrs参数，它包含了该指令所在元素的属性的标准化参数对象。
5、scope[boolean or object]属性，该属性是用来定义指令的scope的范围，默认情况下是false，也就是说该指令继承了父controller的scope，可以随意的使用父controller的scope里的属性，但是这样的话就会污染到父scope里的属性，这样是不可取的。所以我们可以让scope取以下两个值：true和{}。
当为true的时候，表示让Angular给指令创建一个继承于父scope的scope。
var myapp=angular.module('myapp',[])
.controller('myctrl',['$scope', function ($scope) {
$scope.color='red';
}])
.directive('hello', function () {
return{
restrict:'AECM',
replace:true,
template:'<button ng-click="sayhello()" style="background-color: {{color}}">click me</button>',
scope:true，
link: function (scope,elements,attrs) {
elements.bind('click', function () {
elements.css('background-color','blue');
})
}
}
})
</div>
这里我们为父scope定义了一个color的属性，并赋值为red，在hello指令的scope属性中，我们给了true，所以angular就为这个指令创建了一个继承于父scope的scope，然后在template属性中，我们用{{}}使用了从父scope中继承过来的color属性，所以按钮会是红色的。
当为{}的时候，表示创建一个隔离的scope，不会继承父scope的属性。但是在有的时候我们也要需要访问父scope里的属性或者方法，那么我们应该怎么办呢。angular早就为我们想到了这一点，有以下的三个办法可以让我们记性上面的操作：
一：使用@实现单向绑定，如果我们只给scope的这个{}值的话，那么上面代码的按钮的背景色将会是灰色的。，而如果我们需要使用父scope的color属性的时候，我们可以这样写：
scope{
color:'@color'
}
<hello color="{{color}}"></hello>
</div>
这里有两点需要注意：1、scope里的属性color代表的是模板{{}}这个表达式里面的color，两者必须一致。2、scope里的属性color的值，也就是@后面的color，表示的是下面的HTML元素里的属性color，所以这两者也必须一致，当这里的属性名和模板里表达式{{}}里面使用的名称相同的话，就可以省略掉@后面的属性名了，然后写成下面的形式。
scope{
color:'@'
}
</div>
从指令中scope的值可以看出，指令模板中的表达式{{}}里的color的指向的是当前元素元素的color属性，这个color属性的值就是父scope的属性color的值。父scope把他的color属性值传递给了当前元素的color属性，然后color属性又把值传递给了模板中表达式里的color，这个过程是单向的。
二：使用=实现双向绑定
.directive('hello', function () {
return{
restrict:'AECM',
replace:true,
template:'<button style="background-color: {{color}}">click me</button>',
scope:{
color:'='
},
link: function (scope,elements,attrs) {
elements.bind('click', function () {
elements.css('background-color','blue');
scope.$apply(function () {
scope.color='pink';
})
})
}
}
})
<hello color="color"></hello>
<input type="text" ng-model="color"/>
</div>
这里我们给指令的scope中的color属性和父scope中的color属性进行了双向绑定，并且给指令的link函数里，添加了一个单击事件，点击按钮会让按钮的颜色发生变化，并且改变指令scope的color属性的值，再给HTML页面中加了一个input标签，输出或者输入父scope的color属性的值。这里有一个地方需要注意：当前元素的属性名的值不用再加上{{}}这个表达式了，因为这里父scope传递的是一个真实的scope数据模型，而不是简单的字符串，所以这样我们就可以传递简单的字符串、数组、甚至复杂的对象给指令的scope。现在让我们来看看点击这个按钮将会发生什么。