AngularJS指令的详解

　　指令做为AngularJS中最为重要的部分，因此这个框架自己也是自带了比较多的的指令，可是在开发中，这些指令一般不能知足咱们的须要，因此咱们也是须要自定义一些指令的。指令是咱们用来扩展浏览器能力的技术之一。在DOM编译期间，和HTML元素关联着的指令会被检测到，而且被执行。这使得指令能够为DOM指定行为，或者改变它。

　　angular在编译期间，编译器会用$interpolate服务去检查文本中是否嵌入了表达式。这个表达式会被当成一个监视器同样注册，而且做为$digest循环中的一部分，它会自动更新。

　　HTML的编译分为三个阶段：

1. 首先浏览器会用它的标准API将HTML解析成DOM。 你须要认清这一点，由于咱们的模板必须是可被解析的HTML。这是AngularJS和那些“以字符串为基础而非以DOM元素为基础的”模板系统的区别之处。

2. DOM的编译是由  $compile 方法来执行的。 这个方法会遍历DOM并找到匹配的指令。一旦找到一个，它就会被加入一个指令列表中，这个列表是用来记录全部和当前DOM相关的指令的。 一旦全部的指令都被肯定了，会按照优先级被排序，而且他们的  compile 方法会被调用。 指令的  $compile() 函数能修改DOM结构，而且要负责生成一个link函数（后面会提到）。$compile方法最后返回一个合并起来的连接函数，这时连接函数是每个指令的compile函数返回的连接函数的集合。 

3. 经过调用上一步所说的连接函数来将模板与做用域连接起来。这会轮流调用每个指令的连接函数，让每个指令都能对DOM注册监听事件，和创建对做用域的的监听。这样最后就造成了做用域的DOM的动态绑定。任何一个做用域的改变都会在DOM上体现出来。

　　指令的模板代码：

 1 var myModule = angular.module(...);
 2 myModule.directive('directiveName', function factory(injectables) {
 3   var directiveDefinitionObject = {
 4     priority: 0,
 5     template: '<div></div>',
 6     templateUrl: 'directive.html',
 7     replace: false,
 8     transclude: false,
 9     restrict: 'A',
10     scope: false,
11     compile: function compile(tElement, tAttrs, transclude) {
12       return {
13         pre: function preLink(scope, iElement, iAttrs, controller) { ... },
14         post: function postLink(scope, iElement, iAttrs, controller) { ... }
15       }
16     },
17     link: function postLink(scope, iElement, iAttrs) { ... }
18   };
19   return directiveDefinitionObject;
20 });

　　大部分状况下你不须要控制这么多细节，要简化上面的代码，咱们首先须要依赖基本选项的默认值。若是使用默认值的话，上面的代码能够简化成：

1 var myModule = angular.module(...);
2 myModule.directive('directiveName', function factory(injectables) {
3   var directiveDefinitionObject = {
4     compile: function compile(tElement, tAttrs) {
5       return function postLink(scope, iElement, iAttrs) { ... }
6     }
7   };
8   return directiveDefinitionObject;
9 });

　　因为大部分的指令只关心实例，并不须要将模板进行变形，因此咱们还能够简化成：

1 var myModule = angular.module(...);
2 myModule.directive('directiveName', function factory(injectables) {
3   return function postLink(scope, iElement, iAttrs) { ... }
4 });

　　上面代码中的factory函数，咱们叫工厂函数，它是用来建立指令的。它只会被调用一次：就是当编译器第一次匹配到相应指令的时候，你能够在其中进行任何初始化的工做。调用它时使用的是  $injector.invoke ， 因此它遵循全部注入器的规则。

　　指令对象的属性有一下：

• 名称name - 当前做用域的名称 
• 优先级priority - 当一个DOM上有多个指令时，就会须要指定指令执行的顺序。 这个优先级就是用来在执行指令的compile函数前，先排序的。高优先级的先执行。
• terminal - 该参数用来定义是否中止当前元素上比本指令优先级低的指令，若是值为true，就是正常状况，按照优先级高低的顺序来执行，若是设置为false，就不会执行当前元素上比本指令优先级低的指令。
• 做用域scope- 若是被定义成：

  • true - 那么就会为当前指令建立一个新的做用域。若是有多个在同一个DOM上的指令要求建立新做用域，那么只有一个新的会被建立。 这一建立新做用域的规则不适用于模板的根节点，由于模板的根节点老是会获得一个新的做用域。

  • {}，对象哈希 - 那么一个新的“孤立的”做用域就会被建立。这个“孤立的”做用域区别于通常做用域的地方在于，它不会以原型继承的方式直接继承自父做用域。这对于建立可重用的组件是很是有用的，由于可重用的组件通常不该该读或写父做用域的数据。 这个“孤立的”做用域使用一个对象哈希来表示，这个哈希定义了一系列本地做用域属性，这些属性的值能够有如下几种方式。
    • @ 或 @attr - 将本地做用域成员和DOM属性绑定。使用@实现单向绑定。
    • = 或 =expression - 在本地做用域属性和父做用域属性间创建一个双向的绑定。使用=实现双向绑定。
    • & 或 &attr - 调用父scope里的方法。

• controller - 这个是指令内部的controller，跟angular中的controller不同。它的做用是暴露此指令的一些方法给其余指令使用。这个控制器函数是在预编译阶段被执行的，而且它是共享的，这就使得指令间能够互相交流来扩大本身的能力。

• require - 请求将另外一个指令，假设为direct2，中的内部controller做为参数传入到当前指令的连接函数link中，这样在当前指令的link函数中，就能够调用direct2指令中的内部controller中定义的方法了。 这个请求须要传递被请求指令的名字。若是没有找到，就会触发一个错误。请求的名字能够加上下面两个前缀：

  • • ?  - 不要触发错误，这只是一个可选的请求。 
    • ^  - 没找到的话，在父元素的做用域里面去查找有没有。

• restrict - EACM中的任意一个字母。它是用来限制指令的声明格式的。若是没有这一项。那就只容许使用属性形式的指令。

  • E - 元素名称：  <my-directive></my-directive>
  • A - 属性：   <div my-directive="exp"> </div>
  • C - 类名：  <div class="my-directive: exp;"></div>
  • M - 注释：   <!-- directive: my-directive exp -->

• 模板template - 将当前的元素替换掉。 这个替换过程会自动将元素的属性和css类名添加到新元素上。

• 模板地址templateUrl - 和template属性同样，只不过这里指示的是一个模板的URL。由于模板加载是异步的，全部编译和连接都会等到加载完成后再执行。

• 替换replace - 若是被设置成true，那么页面上指令内部里面的内容会被模板替换。好比：<hello><div>这是指令内部的内容</div></hello>，hello指令内部的div内容将会被模板替换掉。

• transclude -  若是不想让指令内部的内容被模板替换，能够设置这个值为true。通常状况下须要和ngTransclude指令一块儿使用。 好比：template:"<div>hello every <div ng-transclude></div></div>"，这时，指令内部的内容会嵌入到ng-transclude这个div中。也就是变成了<div>hello every <div>这是指令内部的内容</div></div>

• 编译compile - function compile(tElement, tAttrs, transclude) { ... }

  编译函数是用来处理须要修改模板DOM的状况的。由于大部分指令都不须要修改模板，因此这个函数也不经常使用。须要用到的例子有  ngTrepeat ，这个是须要修改模板的，还有 ngView 这个是须要异步载入内容的。编译函数接受如下参数。 

  • tElement - template element - 指令所在的元素。对这个元素及其子元素进行变形之类的操做是安全的。

  • tAttrs - template attributes - 这个元素上全部指令声明的属性，这些属性都是在编译函数里共享的。

  • transclude - 一个嵌入的连接函数  function(scope, cloneLinkingFn) 。 

  注意：在编译函数里面不要进行任何DOM变形以外的操做。 更重要的，DOM监听事件的注册应该在连接函数中作，而不是编译函数中。

  编译函数能够返回一个对象或者函数。

  • 返回函数 - 等效于在编译函数不存在时，使用配置对象的  link 属性注册的连接函数。 

  • 返回对象 - 返回一个经过  pre 或  post 属性注册了函数的对象。

• 连接link - function link(scope, iElement, iAttrs, controller) { ... }

  连接函数负责注册DOM事件和更新DOM。它是在模板被克隆以后执行的，它也是大部分指令逻辑代码编写的地方。

  • scope - 指令须要监听的做用域。

  • iElement - instance element - 指令所在的元素。只有在  postLink 函数中对元素的子元素进行操做才是安全的，由于那时它们才已经所有连接好。 

  • iAttrs - instance attributes - 实例属性，一个标准化的、全部声明在当前元素上的属性列表，这些属性在全部连接函数间是共享的。

  • controller - 控制器实例，也就是当前指令经过require请求的指令direct2内部的controller。好比：direct2指令中的controller:function(){this.addStrength = function(){}}，那么，在当前指令的link函数中，你就能够经过controller.addStrength进行调用了。

  Pre-linking function 在子元素被连接前执行。不能用来进行DOM的变形，以防连接函数找不到正确的元素来连接。

  Post-linking function 全部元素都被连接后执行。

　　当咱们的angular应用引导启动的时候，angular将会使用$compile服务遍历DOM元素，在全部的指令都被识别以后，将会调用指令的compile方法，返回一个link函数，而后将这个link函数添加到稍后执行的 link 函数列表中，这个过程被称为编译阶段。像ng-repeat这样的指令，须要被重复克隆不少次，compile函数只在编译阶段被执行一次，而且复制这些模板，可是link 函数会针对每一个被复制的实例被执行。因此分开处理，让咱们在性能上有必定的提升。

参考文档：http://www.tuicool.com/articles/fqiI73M