angular.js指令中的controller、compile與link函數(shù)三者的區(qū)別是什么

本篇文章為大家展示了angular.js指令中的controller、compile與link函數(shù)三者的區(qū)別是什么，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

專注于為中小企業(yè)提供網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)沾化免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了1000+企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

 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ù);我們可以思考一下上面會(huì)輸出一下什么來(lái).

從上面的輸出結(jié)果我們可以得出兩個(gè)結(jié)論:

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

首先我們來(lái)解釋第一個(gè)問(wèn)題;看下圖

angular.js指令中的controller、compile與link函數(shù)三者的區(qū)別是什么

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

第一個(gè)階段是編譯階段:

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

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

第二個(gè)階段是鏈接階段:

鏈接函數(shù)來(lái)將模板與作用域鏈接起來(lái);負(fù)責(zé)設(shè)置事件監(jiān)聽器，監(jiān)視數(shù)據(jù)變化和實(shí)時(shí)的操作DOM.鏈接函數(shù)是可選的。如果定義了編譯函數(shù)，它會(huì)返回鏈接函數(shù)，因此當(dāng)兩個(gè)函數(shù)都定義了時(shí)，編譯函數(shù)會(huì)重載鏈接函數(shù).(解釋上面的結(jié)論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í)行時(shí);會(huì)輸出:

angular.js指令中的controller、compile與link函數(shù)三者的區(qū)別是什么

我們可以看到controller函數(shù)先執(zhí)行,然后是link函數(shù).但是鏈接階段會(huì)執(zhí)行controller,link函數(shù);那么他們有什么不同;我們?cè)谑裁辞闆r該用哪個(gè)?

答案是:

指令的控制器和link函數(shù)可以進(jìn)行互換。控制器主要是用來(lái)提供可在指令間復(fù)用的行為，但鏈接函數(shù)只能在當(dāng)前內(nèi)部指令中定義行為，且無(wú)法在指令間復(fù)用.link函數(shù)可以將指令互相隔離開來(lái)，而controller則定義可復(fù)用的行為。
實(shí)際使用的一些建議:

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

到這里:我們應(yīng)該有一點(diǎn)了解這三者有什么差異了吧?其實(shí)這個(gè)問(wèn)題考的就是我們對(duì)AngularJs生命周期的了解.

最后我們用一個(gè)實(shí)際例子來(lái)看一下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>

結(jié)果如圖:

angular.js指令中的controller、compile與link函數(shù)三者的區(qū)別是什么

可以參照上面的angularjs生命周期圖來(lái)理解.

上述內(nèi)容就是angular.js指令中的controller、compile與link函數(shù)三者的區(qū)別是什么，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享標(biāo)題：angular.js指令中的controller、compile與link函數(shù)三者的區(qū)別是什么
本文來(lái)源：http://jinyejixie.com/article48/psipep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營(yíng)銷推廣、域名注冊(cè)、用戶體驗(yàn)、網(wǎng)站導(dǎo)航、建站公司、定制網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

angular.js指令中的controller、compile與link函數(shù)三者的區(qū)別是什么

angular.js指令中的controller、compile與link函數(shù)三者的區(qū)別是什么