angular.js指令中的controller、compile與link函數(shù)的不同之處

更新時間：2017年05月10日 11:30:54 作者：RuGuo_09

最近一位大神問了我angular.js指令中的controller、compile與link函數(shù)的不同，想了想居然回答不出來，所以必須要深入的探究下，下面這篇文章主要介紹了關于angular.js指令中的controller、compile與link函數(shù)的不同之處，需要的朋友可以參考下。

前言

算了算用angualrjs去做開發(fā)也有兩個月了，但做為一個菜鳥，難免會被大神吊打(這里有一個悲傷的故事...)。某天一位前端大神問我：你知道angular指令中的controller,compile,link函數(shù)有什么不同？然后我就一臉懵逼了....于是決定深入的去探究下。

今天我們來一起了解一下它們有什么不同的地方:

先看一段示例代碼

 var ag = angular.module("myApp",[]);
  ag.controller("myCtrl",["$rootScope",function($rootScope){

  }]);
  ag.directive("order",function(){
   return{
    restrict:"AE",
    controller:function($scope, $element, $attrs, $transclude) {
     console.log("controller");
    },
    compile:function(tElement, tAttrs, transclude){
     console.log("compile");
     return{
      pre:function(scope, iElement, iAttrs, controller){
       console.log("pre")
      },
      post:function(scope, iElement, iAttrs, controller){
       console.log("post")
      }
     }
    },
    link:function(scope, iElement, iAttrs, controller){
     console.log("link")
    }
   }
  });

我們可以看到什么order指令中寫了controller, complie, link函數(shù);我們可以思考一下上面會輸出一下什么來.

從上面的輸出結果我們可以得出兩個結論:

他們的執(zhí)行順序不同,最先執(zhí)行的是complie函數(shù) ; 然后是controller函數(shù),然后是pre函數(shù),最后是post函數(shù).
link函數(shù)沒有執(zhí)行.

首先我們來解釋第一個問題;看下圖

從圖中我們可以看到整個 AngularJs 的生命周期分為兩個階段:

第一個階段是編譯階段:

在編譯階段，AngularJS會遍歷整個HTML文檔并根據(jù)JavaScript中的指令定義來處理頁面上聲明的指令。每一個指令的模板中都可能含有另外一個指令，另外一個指令也可能會有自己的模板。當AngularJS調(diào)用HTML文檔根部的指令時，會遍歷其中所有的模板，模板中也可能包含帶有模板的指令.一旦對指令和其中的子模板進行遍歷或編譯，編譯后的模板會返回一個叫做模板函數(shù)的函數(shù)。我們有機會在指令的模板函數(shù)被返回前，對編譯后的DOM樹進行修改。

ag.directive("order",function(){
 return{
  restrict:"AE",
  compile:function(tELe ,tAttrs,transcludeFn){
    //進行編譯后的dom操作
    return{
      pre:function(scope, iElement, iAttrs, controller){
       // 在子元素被鏈接之前執(zhí)行
       // 在這里進行Dom轉換不安全
      },
      post:function(scope, iElement, iAttrs, controller){
       // 在子元素被鏈接之后執(zhí)行
      }
     }
  }
 }
})

第二個階段是鏈接階段:

鏈接函數(shù)來將模板與作用域鏈接起來;負責設置事件監(jiān)聽器，監(jiān)視數(shù)據(jù)變化和實時的操作DOM.鏈接函數(shù)是可選的。如果定義了編譯函數(shù)，它會返回鏈接函數(shù)，因此當兩個函數(shù)都定義了時，編譯函數(shù)會重載鏈接函數(shù).(解釋上面的結論2)

 var ag = angular.module("myApp",[]);
  ag.controller("myCtrl",["$rootScope",function($rootScope){

  }]);
  ag.directive("order",function(){
   return{
    restrict:"AE",
    controller:function($scope, $element, $attrs, $transclude) {
     console.log("controller");
    },
    link:function(scope, iElement, iAttrs, controller){
     console.log("link")
    }
   }
  });

上面指令執(zhí)行時;會輸出:

我們可以看到controller函數(shù)先執(zhí)行,然后是link函數(shù).但是鏈接階段會執(zhí)行controller,link函數(shù);那么他們有什么不同;我們在什么情況該用哪個?

答案是:

指令的控制器和link函數(shù)可以進行互換?？刂破髦饕怯脕硖峁┛稍谥噶铋g復用的行為，但鏈接函數(shù)只能在當前內(nèi)部指令中定義行為，且無法在指令間復用.link函數(shù)可以將指令互相隔離開來，而controller則定義可復用的行為。
實際使用的一些建議:

如果我們希望將當前指令的API暴露給其他指令使用，可以使用controller參數(shù)，否則可以使用link來構造當前指令元素的功能性。如果我們使用了scope.$watch()或者想要與DOM元素做實時的交互，使用鏈接會是更好的選擇。

到這里:我們應該有一點了解這三者有什么差異了吧?其實這個問題考的就是我們對AngularJs生命周期的了解.

最后我們用一個實際例子來看一下AngularJs的生命周期:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
 <div parent>
  <div child></div>
 </div>
<script src="../plugins/angularjs/angular.src.js"></script>
<script>
 var ag = angular.module("myApp",[]);
  ag.controller("myCtrl",["$rootScope",function($rootScope){

  }]);
  ag.directive("parent",function(){
   return{
    restrict:"AE",
    controller:function($scope, $element, $attrs, $transclude) {
     console.log("parent controller");
    },
    compile:function(tElement, tAttrs, transclude){
     console.log("parent compile");
     return{
      pre:function(scope, iElement, iAttrs, controller){
       console.log("parent pre")
      },
      post:function(scope, iElement, iAttrs, controller){
       console.log("parent post")
      }
     }
    }
   }
  });
 ag.directive("child",function(){
  return{
   restrict:"AE",
   controller:function($scope, $element, $attrs, $transclude) {
    console.log("child controller");
   },
   compile:function(tElement, tAttrs, transclude){
    console.log("child compile");
    return{
     pre:function(scope, iElement, iAttrs, controller){
      console.log("child pre")
     },
     post:function(scope, iElement, iAttrs, controller){
      console.log("child post")
     }
    }
   }
  }
 });
</script>
</body>
</html>

結果如圖: