簡(jiǎn)介
? ? ? ? 在我們用Angular開(kāi)發(fā)中，我們必須要知道angular的生命中器，這個(gè)在未來(lái)的開(kāi)發(fā)中至關(guān)重要。
? ? ? ? AngularJs生命周期分為兩個(gè)階段。
? ? ? ? 編譯階段： 在編譯階段，AngularJs會(huì)遍歷整個(gè)HTML文檔并處理頁(yè)面上聲明的指令，這些指令可能是嵌套。在完成遍歷或編譯后，會(huì)返回一個(gè)模版函數(shù)，我們可以在模版函數(shù)返回之前對(duì)編譯后的DOM進(jìn)行修改，在這個(gè)時(shí)候?qū)OM進(jìn)行修改，可以大幅度減少性能花銷(xiāo)，因?yàn)镈OM還未進(jìn)行數(shù)據(jù)綁定編譯完成，我們可以通過(guò)編譯函數(shù)對(duì)DOM進(jìn)行訪(fǎng)問(wèn)（此時(shí)的DOM并未唄渲染到頁(yè)面中）。
? ? ? ? 鏈接階段：編譯完成即進(jìn)入鏈接階段，在鏈接階段，數(shù)據(jù)與DOM進(jìn)行綁定。
注意：上面兩句話(huà)非常重要，與學(xué)習(xí)Vue必須學(xué)習(xí)Vue的生命周期一樣重要 ? ? ??
link函數(shù)
? ? ? ? link階段負(fù)責(zé)將作用域和DOM進(jìn)行鏈接，我們可以指定link函數(shù)，對(duì)已經(jīng)編譯的DOM進(jìn)行一些如事件監(jiān)聽(tīng)等操作。
????????link函數(shù)可接受三個(gè)或四個(gè)參數(shù)
? ? ? ? scope該指令的作用域
? ? ? ? ele指令元素
? ? ? ? attrs指令上的屬性
? ? ? ? 當(dāng)指令的require屬性被指定 則第四個(gè)參數(shù)生效，否則為underfined
例子
? ? ? ?<body ng-app="myApp">
? ? ? ? ? ? <my-directive diy="Angular"></my-directive>
? ? ? ?</body>
? ? ? ? <script>
? ? ? ? ? ? var app = angular.module("myApp",[]);
? ? ? ? ? ? app.directive("myDirective",function(){
? ? ? ? ? ? ? ? ? ? return {
? ? ? ? ? ? ? ? ? ? ? ? template: `
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <h1>自定義指令{{name}}</h1>
????????????????????????????????</div>
????????????????????????`,
? ? ? ? ? ? ? ? ? ? ? ? ? ?link: function(scope,ele,attrs) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? console.log(ele,arrts);//ele是DOM元素，attrs是DOm元素上的屬性
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? scope.name="Angular"；
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //angular自帶輕量級(jí)的jQuery
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ele.children().css("background","red");
? ? ? ? ? ? ? ? ? ? ? ? ? ?}
????????????????????}
????????????})
????????</script>
require配置項(xiàng)
? ? require參數(shù)被用來(lái)指定該指令依賴(lài)的其他指令
? ? 在父子指令或兄弟指令的controller之間的一個(gè)橋梁，而require也用恰恰可以用來(lái)做指令間的通信
? ? <body ng-app="myApp">
? ? ? ? ? ? <first-directive>
? ? ? ? ? ? ? ? ? ? <second-directive?third-directive></second-directive>
????????????</first-directive>
? ? ?</body>
? ? ? <script>
? ? ? ? ? ? var app = angular.module("myApp",[]);
? ? ? ? ? ? app.directive("firstDirective",function(){
? ? ? ? ? ? ? ? return {
? ? ? ? ? ? ? ? ? ? controller: ["$scope",functiom($scope){
? ? ? ? ? ? ? ? ? ? ? ? ? ? $scope.firstName= "first";
? ? ? ? ? ? ? ? ? ? ? ? ? ? this.info = {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? name: $scope.firstName,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? age: 25
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?}
????????????????????}]
????????????????}
????????????}),
? ? ? ? ? ? app.directive("secondDirective",function() {
? ? ? ? ? ? ? ? ? ? return {
? ? ? ? ? ? ? ? ? ? ? ? ? ? template: `
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <h1>第二個(gè)指令</h1>
????????????????????????????????????</div>
????????????????????????????`,
? ? ? ? ? ? ? ? ? ? ? ? ? ? require: "?^thirdDirective"
? ? ? ? ? ? ? ? ? ? ? ? ? ? link: function(scope,ele,attrs,ctrl) {
? ??????????????????????????????????console.log(ctrl.name)
????????????????????????????}
????????????????????}
????????????})
? ? ? ? ? ? app.directive("thirdDirective",function(){
? ? ? ? ? ? ? ? ? ? return {
? ? ? ? ? ? ? ? ? ? ? ? ? ? restrict: "A",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?require: "?^firstDirective",//?本級(jí)^上級(jí) 本級(jí)或上級(jí)查找
? ? ? ? ? ? ? ? ? ? ? ? ? ? link: function(scope,ele,attrs,ctrl){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? console.log(ctrl.info)
????????????????????????????},
? ? ? ? ? ? ? ? ? ? ? ? ? ? controller: ["$scope",function($scope){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? this.name = "thirdDirective";
????????????????????????????}]
????????????????????}
????????????})
? ? ? ?</script>
? ??????????????????????????????????????????????????不積跬步無(wú)以至千里,不積小流無(wú)以成江海 ? ?
