参考更多1
参考更多2

Directive的目的:

1. 使你的Html更具语义化。
2. 抽象一个自定义组件，在其他地方进行重用。

.directive 函数

使用 .directive 函数来添加自定义的指令。
要调用自定义指令，HTML 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令，directiveName, 但在使用它时需要以 - 分割, directive-name

//一个常见的directive实例

<div ng-app='myApp'>
  <directive-name ng-model='hello'> boys </directive-name>
</div>

angular.module('myApp',['myModule']); 
angular.module('myModule',[]) 
.directive('directiveName', ['$rootScope',function ($rootScope) {//此处注入服务
  return { 
 　　template: "<div>hello <div ng-transclude></div></div>", //hello boys
 　　templateUrl: 'directive.html', //用于代替template,一般会进行模板缓存
 　　replace: true, //使 <directive-name>标签被template彻底取代,并获得其属性,class等;未设置template时不会取代内部内容
     require:'^?ngModel',//获取其他指令中控制器并作为link的第四个参数
 　　transclude: true, //使原html中的boys置入<div ng-transclude></div>
 　　restrict: 'EA',   
 　　scope: false,  //默认值,双向绑定
     controller:function($scope, $element, $attrs, $transclude) { ... },
     compile: function (tElement, tAttrs, transclude) {   
         return {   
             pre: function (scope, iElement, iAttrs, controller) { ... },   
             post: function (scope, iElement, iAttrs, controller) { ... }   
         }   
     },   
     link: function (scope, iElement, iAttrs) { ... } 
      //执行顺序:directive之外的controller,derective内的compile,controller,(pre,post)link
      //(pre和post为link的两个阶段,故有compile时link函数不执行改为执行pre和post)
      //且每个阶段都是先执行父再执行子,全部执行完毕后再开始下个阶段
 }; 
}]); 

1. restrict
   可选参数，指令在DOM中声明的形式；取值如下 :
   E(元素)：<directiveName></directiveName>
   A(属性)：<div directiveName='expression'></div>
   C(类)： <div class='directiveName'></div>
   M(注释)：<--directive:directiveName expression-->
   其中默认值为A；也可以多个一起用，如EA表示即可以元素也可以属性。

2. priority
   (数字)，可选参数，指明指令的优先级，若在单个DOM上有多个指令，则优先级高的先执行；

3. terminal
   （布尔型），可选参数，可以被设置为true或false，若设置为true，则优先级低于此指令的其他指令无效，不会被调用

4. template
   （字符串或者函数）可选参数，

   • 字符串： '<div><h1>Hi 我是林炳文~~~</h1></div>'
   • 函数：

   template: function(tElement,tAttrs){ 
   var _html = ''; 
   _html += '<div>' +'hello '+tAttrs.title+'</div>'; 
   return _html; 
   } 

其中tElement是指使用此指令的元素，而tAttrs则实例的属性，它是一个由元素上所有的属性组成的集合（对象）形如：
<hello-world2 title = '我是第二个directive'></hello-world2>
其中title就是tattrs上的属性

5. templateUrl
   （字符串或者函数），可选参数，可以是
   （1）一个代表HTML文件路径的字符串
   （2）一个函数，可接受两个参数tElement和tAttrs（大致同上）
   注意：在本地开发时候，需要运行一个服务器，不然使用templateUrl会报错 Cross Origin Request Script（CORS）错误。

模板缓存
由于加载html模板是通过异步加载的，若加载大量的模板会拖慢网站的速度，这里有个技巧，就是先缓存模板

• 通过 script 标签引入

<script type='text/ng-template' id='hello.html'> 
  <div><h1>Hi 我是林炳文~~~</h1></div> 
</script> 

• 通过使用 $templateCache 来实现(可通过grunt-angular-templates自动生成)

app.run(["$templateCache", function($templateCache) {
  $templateCache.put("hello.html", 
  "<div><h1>Hi 我是林炳文~~~</h1></div>"); 
}]); 

则都用 templateUrl: 'hello.html'即可调用,甚至ng-include=" ' hello.html ' "也可以调用

6. replace
   （布尔值），默认值为false，如replace 为true，则将模版(template)内容替换当前的自定义HTML元素，并将原来元素的属性、class一并迁移。

7. scope

• 为true或false时,直接与父作用域交互(包括标签内属性和template内容),为{}时与父隔离,只能借助该指令所在标签的属性与父作用域交互
  1. 默认值false。表示继承父作用域(相互影响);
  2. true。表示继承父作用域，并创建子作用域（父影响子,子不影响父）;
  3. {}。表示创建一个全新的隔离作用域(相互不影响)；
     一旦使用{},则仅能通过模板标签的属性值传递信息;
     • 仅有符号无值时,默认名称即属性名。
  • = 通过 directive 的 attr 属性的值在局部 scope 的属性和父 scope 属性名之间建立双向绑定。父子相互影响

<div>{{name}}</div>
<isolated-directive name="name" myHello=" '999' "></isolated-directive> 

.directive("isolatedDirective", function () { 
  return { 
    scope: { 
      name: "=" ,
      hello: "=myhello"
   }, 
  template: '{{name}} {{hello}}' //对应的name + 999 
  }; 
}); 

• @ 绑定一个局部 scope 属性到当前 dom 节点的属性值。父影响子,子不影响父

<div>{{name}}</div>
<isolated-directive name="{{name}}"></isolated-directive> 

.directive("isolatedDirective", function () { 
  return { 
    scope: { 
      name: "@" 
   }, 
  template: '{{name}}' 
  }; 
}); 

• & 提供一种方式使可以调用父中的function。如果没有指定 attr 名称，则属性名称为相同的本地名称。

<div isolated-directive action="click()"></div> 

var app = angular.module('myApp', []); 
app.controller("myController", function ($scope) { 
    $scope.value = "hello world"; 
    $scope.click = function () { 
      $scope.value = Math.random(); 
    }
}).directive("isolatedDirective", function () { 
  return { 
  scope: { 
    action: "&" 
  }, 
  template: '<input type="button" value="执行父scope定义的方法" ng-click="action()">' 
 } 
}) 

8. transclude
   可选参数,默认为false;
   如果不想让指令内部的内容被模板替换，可以设置为true。此时需要在template中配合ngTransclude指令,如:

template:"<div>hello every <div ng-transclude></div></div>"

则原来html中的内容置入该<div ng-transclude></div>中
注意, transclude不为true时不能有 ng-transclude 属性,否则报错

9. controller
   可以是一个字符串或者函数。
   若是为字符串，则将字符串当做是控制器的名字，来查找注册在应用中的控制器的构造函数(应用中其他的地方，可以是同一个文件或被index.html包含的另一个文件)

• 作用域可视为直接绑定在 <directive-name> 的controller的子作用域

10. link与compile

• compile期间是对指令的模板进行转换。
• controller期间处理业务逻辑,数据交互。
• link期间是在模型和视图之间建立联系,加载变量进dom,绑定和触发事件等，scope在link阶段才会被绑定到元素上，所以在compile阶段操作scope会报错。
• 一般只操作link即可,实在需要复用则使用controller属性
• link和compile中的scope等价于controller中的$scope

11. require
    详见:Directive的require属性与Angular的表单验证