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属性会被忽略）
4000

* 返回一个链接函数要又分为了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不运行。