Angularjs Directive 详解

在Angular.js应用的开发中，我们用指令属性来将行为绑定到DOM上。
指令的作用是把我们自定义的语义化标签替换成浏览器能够认识的HTML标签

1.为什么以及何时创建自定义指令？
 a:自定义指令让你能创建出超越AngularJS所提供的内置指令的功能。
 b:当内置指令无法按需求工作时，或想创建可复用于不同应用程序的自包含的功能时，就可以创建自定义指令。


2.定义指令
 a: 使用Module.directive方法来创建指令，参数是新指令的名称和用于创建指令的工厂函数。


3.controller，link，compile


控制器：指令能够创建出被其他指令所用的控制器。这允许指令被组合起来创建出更复杂的组件。
$scope: 作用域依赖
$element: 元素的依赖
$attrs:   元素属性的依赖
* 使用controller 和 require 进行指令间通信


链接函数：指令中的worker函数被称之为链接函数，它提供了将指令与HTML文档和作用域数据相连接的方法。
scope:   指令被应用到视图的作用域
element: 指令被应用到的HTML元素
attrs:   HTML元素的属性

编译函数: 当指令特别复杂或者需要处理大量数据时，使用编译函数操作DOM并让链接函数执行其他任务。
element: 指令被应用到的HTML元素
attrs:   元素的属性
transcludeFn: 用于创建嵌入包含元素的拷贝函数


* 编译函数会返回一个链接函数（当compile属性被使用时，link属性会被忽略）
* 返回一个链接函数要又分为了pre-link与post-link阶段
* compile与pre-link的执行顺序是依次执行的,但是post-link正好相反.

compile: function(element, attrs, transcludeFn){
   return function($scope, $element, $attr){
    ...
   }
}


-------------------------------------------------------------(从作用域中获取数据）
.controller("defaultCtrl", function($scope){
$scope.products = [
{name: "Apples",  price: 1.20},
{name: "Bananas", price: 2.42}
];
}

angular.module("exampleApp", [])
  .directive("unorderedList", function(){
     return function(scope, element, attrs){       （注： 普通参数，并非通过依赖注入提供）
        var data = scope[attrs["unorderedList"]];
if(angular.isArray(data)){
           for(var i = 0; i               console.log("Item: " + data[i].name);
           }
        }
     }
  })
-------------------------------------------------------------（生成HTML元素）
angular.module("exampleApp", [])
  .directive("unorderedList", function(){
     return function(scope, element, attrs){ 
        var data = scope[attrs["unorderedList"]];
if(angular.isArray(data)){
  var listElem = angular.element("

");
  element.append(listElem);
           for(var i = 0; i               listElem.append(angular.element("
• ").text(data[i].name));
             }
          }
       }
    }
  -------------------------------------------------------------（controller，link，compile执行顺序）
  .directive('exampleDirective', function() {  
      return {  
          restrict: 'E',  
  require: "^productTable",  --指令所在元素的父元素上查找的指令名
          template: '

  Hello {{number}}!

  ',  
          controller: function($scope, $element, $attrs){  
              $scope.number = $scope.number + "22222 ";  
  this.updateFn = function(){
  ...
  }
          },  
          link: function(scope, el, attr, ctrl) {  
              scope.number = scope.number + "33333 ";  
  ctrl.updateFun();
          },  
          compile: function(element, attributes) {  
              return {  
                  pre: function preLink(scope, element, attributes) {  
                      scope.number = scope.number + "44444 ";  
                  },  
                  post: function postLink(scope, element, attributes) {  
                      scope.number = scope.number + "55555 ";  
                  }  
              };  
          }  
  }
  }）; 
    
  .controller('directive2',['$scope',  
      function($scope) {  
          $scope.number = '1111 ';  
      }  
  ]);  
    
  //html
         
   
             
         
  
  
  
  运行结果：Hello 1111 22222 44444 55555 !  
  由结果可以看出来，controller先运行，compile后运行，link不运行。