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}
];
}


<div unordered-list="products"><div>


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<data.length; 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("<ul>");
  element.append(listElem);
           for(var i = 0; i<data.length; i++){
              listElem.append(angular.element("<li>").text(data[i].name));
           }
        }
     }
  }
-------------------------------------------------------------（controller，link，compile执行顺序）
.directive('exampleDirective', function() {  
    return {  
        restrict: 'E',  
require: "^productTable",  --指令所在元素的父元素上查找的指令名
        template: '<p>Hello {{number}}!</p>',  
        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
       <div ng-controller="directive2">  
          <example-directive></example-directive>  
       </div>


运行结果：Hello 1111 22222 44444 55555 !  
由结果可以看出来，controller先运行，compile后运行，link不运行。