AngularJS 中的指令实践开发指南(一)
指令（Directives）是所有AngularJS应用最重要的部分。尽管AngularJS已经提供了非常丰富的指令，但还是经常需要创建应用特定的指令。这篇教程会为你讲述如何自定义指令，以及介绍如何在实际项目中使用。在这篇文章的最后（第二部分），我会指导你如何使用Angular指令来创建一个简单的记事本应用。
概述
一个指令用来引入新的HTML语法。指令是DOM元素上的标记，使元素拥有特定的行为。举例来说，静态的HTML不知道如何来创建和展现一个日期选择器控件。让HTML能识别这个语法，我们需要使用指令。指令通过某种方法来创建一个能够支持日期选择的元素。我们会循序渐进地介绍这是如何实现的。如果你写过AngularJS的应用，那么你一定已经使用过指令，不管你有没有意识到。你肯定已经用过简单的指令，比如ng-mode,ng-repeat,ng-show等。这些指令都赋予DOM元素特定的行为。例如，ng-repeat重复特定的元素，ng-show有条件地显示一个元素。如果你想让一个元素支持拖拽，你也需要创建一个指令来实现它。指令背后基本的想法很简单。它通过对元素绑定事件监听或者改变DOM而使HTML拥有真实的交互性。
jQuery视角
想象一下使用jQuery如何创建一个日期选择器。首先，我们在HTML中添加一个普通的输入框，然后通过jQuery调用$(element).dataPicker()来将它转变成一个日期选择器。但是，仔细想一下。当一个设计人员过来检查HTML标记的时候，他/她能否立刻猜到这个字段实际上表示的内容？这只是一个简单的输入框，或者一个日期选择器？你需要查看jQuery代码来确定这些。而Angular的方法是使用一个指令来扩展HTML。所以，一个日期选择器的指令可以是下面的形式：
<inputtype="text"/>
或者是这样：
<inputtype="text"/>
这种创建UI组建的方式更加直接和清晰。你可以轻易地通过查看元素就明白这到底是什么。
创建自定义指令：
一个Angular指令可以有以下的四种表现形式：1.一个新的HTML元素（<data-picker></data-picker>）2.元素的属性（<inputtype=”text”data-picker/>）3.CSSclass（<inputtype=”text”class=”data-picker”/>）4.注释（<!–directive:data-picker–>）当然，我们可以控制我们的指令在HTML中的表现形式。下面我们来看一下AngularJS中的一个典型的指令的写法。指令注册的方式与controller一样，但是它返回的是一个拥有指令配置属性的简单对象(指令定义对象)。下面的代码是一个简单的HelloWorld指令。
varapp=angular.module('myapp',[]);
app.directive('helloWorld',function(){
return{
restrict:'AE',
replace:'true',
template:'<h3>HelloWorld!!</h3>'
};
});
在上面的代码中，app.directive()方法在模块中注册了一个新的指令。这个方法的第一个参数是这个指令的名字。第二个参数是一个返回指令定义对象的函数。如果你的指令依赖于其他的对象或者服务，比如$rootScope,$http,或者$compile，他们可以在这个时间被注入。这个指令在HTML中以一个元素使用，如下：
<hello-world/> //OR <hello:world/>
或者，以一个属性的方式使用：
<divhello-world></div> //OR <divhello:world/>
如果你想要符合HTML5的规范，你可以在元素前面添加x-或者data-的前缀。所以下面的标记也会匹配helloWorld指令：
<divdata-hello-world></div> //OR <divx-hello-world></div>
注意：在匹配指令的时候，Angular会在元素或者属性的名字中剔除x-或者data-前缀。然后将–或者:连接的字符串转换成驼峰(camelCase)表现形式，然后再与注册过的指令进行匹配。这是为什么，我们在HTML中以hello-world的方式使用helloWorld指令。其实，这跟HTML对标签和属性不区分大小写有关。尽管上面的指令仅仅实现了静态文字的显示，但是这里还是有一些有趣的点值得我们去挖掘。我们在指令定义过程中使用了三个属性来配置指令。我们来一一介绍他们的作用。
restrict–这个属性用来指定指令在HTML中如何使用（还记得之前说的，指令的四种表示方式吗）。在上面的例子中，我们使用了‘AE'。所以这个指令可以被当作新的HTML元素或者属性来使用。如果要允许指令被当作class来使用，我们将restrict设置成‘AEC'。
template–这个属性规定了指令被Angular编译和链接（link）后生成的HTML标记。这个属性值不一定要是简单的字符串。template可以非常复杂，而且经常包含其他的指令，以及表达式({{}})等。更多的情况下你可能会见到templateUrl，而不是template。所以，理想情况下，你应该将模板放到一个特定的HTML文件中，然后将templateUrl属性指向它。
replace–这个属性指明生成的HTML内容是否会替换掉定义此指令的HTML元素。在我们的例子中，我们用<hello-world></hello-world>的方式使用我们的指令，并且将replace设置成true。所以，在指令被编译之后，生成的模板内容替换掉了<hello-world></hello-world>。最终的输出是<h3>HelloWorld!!</h3>。如果你将replace设置成false，也就是默认值，那么生成的模板会被插入到定义指令的元素中。
打开这个plunker，在”HelloWorld!!”右键检查元素内容，来更形象地明白这些。
Link函数和Scope
指令生成出的模板其实没有太多意义，除非它在特定的scope下编译。默认情况下，指令并不会创建新的子scope。更多的，它使用父scope。也就是说，如果指令存在于一个controller下，它就会使用这个controller的scope。如何运用scope，我们要用到一个叫做link的函数。它由指令定义对象中的link属性配置。让我们来改变一下我们的helloWorld指令，当用户在一个输入框中输入一种颜色的名称时，HelloWorld文字的背景色自动发生变化。同时，当用户在HelloWorld文字上点击时，背景色变回白色。相应的HTML标记如下：
<bodyng-controller="MainCtrl"> <inputtype="text"ng-model="color"placeholder="Enteracolor"/> <hello-world/> </body>
修改后的helloWorld指令如下：
app.directive('helloWorld',function(){
return{
restrict:'AE',
replace:true,
template:'<pstyle="background-color:{{color}}">HelloWorld',
link:function(scope,elem,attrs){
elem.bind('click',function(){
elem.css('background-color','white');
scope.$apply(function(){
scope.color="white";
});
});
elem.bind('mouseover',function(){
elem.css('cursor','pointer');
});
}
};
});
我们注意到指令定义中的link函数。它有三个参数：
scope–指令的scope。在我们的例子中，指令的scope就是父controller的scope。
elem–指令的jQLite(jQuery的子集)包装DOM元素。如果你在引入AngularJS之前引入了jQuery，那么这个元素就是jQuery元素，而不是jQLite元素。由于这个元素已经被jQuery/jQLite包装了，所以我们就在进行DOM操作的时候就不需要再使用$()来进行包装。
attr–一个包含了指令所在元素的属性的标准化的参数对象。举个例子，你给一个HTML元素添加了一些属性：，那么可以在link函数中通过attrs.someAttribute来使用它。
link函数主要用来为DOM元素添加事件监听、监视模型属性变化、以及更新DOM。在上面的指令代码片段中，我们添加了两个事件，click，和mouseover。click处理函数用来重置<p>的背景色，而mouseover处理函数改变鼠标为pointer。在模板中有一个表达式{{color}}，当父scope中的color发生变化时，它用来改变HelloWorld文字的背景色。这个plunker演示了这些概念。
compile函数
compile函数在link函数被执行之前用来做一些DOM改造。它接收下面的参数：
tElement–指令所在的元素
attrs–元素上赋予的参数的标准化列表
要注意的是compile函数不能访问scope，并且必须返回一个link函数。但是如果没有设置compile函数，你可以正常地配置link函数，（有了compile，就不能用link，link函数由compile返回）。compile函数可以写成如下的形式：
app.directive('test',function(){
return{
compile:function(tElem,attrs){
//dooptionalDOMtransformationhere
returnfunction(scope,elem,attrs){
//linkingfunctionhere
};
}
};
});
大多数的情况下，你只需要使用link函数。这是因为大部分的指令只需要考虑注册事件监听、监视模型、以及更新DOM等，这些都可以在link函数中完成。但是对于像ng-repeat之类的指令，需要克隆和重复DOM元素多次，在link函数执行之前由compile函数来完成。这就带来了一个问题，为什么我们需要两个分开的函数来完成生成过程，为什么不能只使用一个？要回答好这个问题，我们需要理解指令在Angular中是如何被编译的！
指令是如何被编译的
当应用引导启动的时候，Angular开始使用$compile服务遍历DOM元素。这个服务基于注册过的指令在标记文本中搜索指令。一旦所有的指令都被识别后，Angular执行他们的compile方法。如前面所讲的，compile方法返回一个link函数，被添加到稍后执行的link函数列表中。这被称为编译阶段。如果一个指令需要被克隆很多次（比如ng-repeat），compile函数只在编译阶段被执行一次，复制这些模板，但是link函数会针对每个被复制的实例被执行。所以分开处理，让我们在性能上有一定的提高。这也说明了为什么在compile函数中不能访问到scope对象。在编译阶段之后，就开始了链接（linking）阶段。在这个阶段，所有收集的link函数将被一一执行。指令创造出来的模板会在正确的scope下被解析和处理，然后返回具有事件响应的真实的DOM节点。
改变指令的Scope
默认情况下，指令获取它父节点的controller的scope。但这并不适用于所有情况。如果将父controller的scope暴露给指令，那么他们可以随意地修改scope的属性。在某些情况下，你的指令希望能够添加一些仅限内部使用的属性和方法。如果我们在父的scope中添加，会污染父scope。其实我们还有两种选择：
一个子scope–这个scope原型继承子父scope。
一个隔离的scope–一个孤立存在不继承自父scope的scope。
这样的scope可以通过指令定义对象中scope属性来配置。下面的代码片段是一个例子：
app.directive('helloWorld',function(){
return{
scope:true,
//useachildscopethatinheritsfromparent
restrict:'AE',
replace:'true',
template:'<h3>HelloWorld!!</h3>'
};
});
上面的代码，让Angular给指令创建一个继承自父socpe的新的子scope。另外一个选择，隔离的scope：
app.directive('helloWorld',function(){
return{
scope:{},
//useanewisolatedscope
restrict:'AE',
replace:'true',
template:'<h3>HelloWorld!!</h3>'
};
});
这个指令使用了一个隔离的scope。隔离的scope在我们想要创建可重用的指令的时候是非常有好处的。通过使用隔离的scope，我们能够保证我们的指令是自包含的，可以被很容易的插入到HTML应用中。它内部不能访问父的scope，所保证了父scope不被污染。在我们的helloWorld指令例子中，如果我们将scope设置成{}，那么上面的代码将不会工作。它会创建一个新的隔离的scope，那么相应的表达式{{color}}会指向到这个新的scope中，它的值将是undefined.使用隔离的scope并不意味着我们完全不能访问父scope的属性。其实有一些技术可以允许我们访问父scope的属性，甚至监视他们的变化。我们会在指令这个系列的第二部分中讨论这些技术，以及一些更高级的概念，比如Controller函数。第二部分也会和你一起使用Angular指令创建一个较为丰富的记事本应用。
关于AngularJS中的指令实践指南(一)，小编就给大家介绍到这里，下面文章讲给大家介绍angularjs中的指令实践开发指南二(二)，希望对大家有所帮助！