今天，接著昨天的angular自定義指令說(shuō)一下其中的其他屬性
1据忘、priority[number]屬性鹦牛，這個(gè)屬性是來(lái)規(guī)定自定義的指令的優(yōu)先級(jí)的，當(dāng)一個(gè)DOM元素上面有一個(gè)以上的指令的時(shí)候勇吊，就需要去比較指令的優(yōu)先級(jí)了曼追，優(yōu)先級(jí)高的指令先執(zhí)行榜轿。這個(gè)優(yōu)先級(jí)就是用來(lái)在執(zhí)行指令的compile函數(shù)前叶堆，先排序的，那么關(guān)于compile這個(gè)函數(shù)茸时，我們會(huì)在下面仔細(xì)的說(shuō)下针史。
2晶伦、terminal[boolean]屬性，該參數(shù)用來(lái)定義是否停止當(dāng)前元素上比本指令優(yōu)先級(jí)低的指令啄枕，如果值為true婚陪，就是正常情況，按照優(yōu)先級(jí)高低的順序來(lái)執(zhí)行频祝，如果設(shè)置為false泌参，就不會(huì)執(zhí)行當(dāng)前元素上比本指令優(yōu)先級(jí)低的指令。
3常空、link[function]屬性沽一，在上面的例子中，我們自定義的指令其實(shí)沒(méi)有多大意義漓糙，這只是一個(gè)最簡(jiǎn)單的指令铣缠，有好多的屬性我們都沒(méi)有為他定義，所以沒(méi)有多大用途昆禽。比如這個(gè)link函數(shù)蝗蛙，它包括三個(gè)參數(shù)：scope、element醉鳖、attrs歼郭。這個(gè)link函數(shù)主要是用來(lái)添加對(duì)DOM元素的事件監(jiān)聽(tīng)、監(jiān)視模型屬性變化辐棒、以及更新DOM的病曾。它里面三個(gè)參數(shù)：
一：scope參數(shù)牍蜂，在我們沒(méi)有為指令定義scope屬性的時(shí)候，那么他代表的就是父controller的scope泰涂。
二：element參數(shù)鲫竞，就是指令的jQLite(jQuery的子集)包裝DOM元素。如果你在引入AngularJS之前引入了jQuery逼蒙，那么這個(gè)元素就是jQuery元素从绘，而不是jQLite元素。由于這個(gè)元素已經(jīng)被jQuery/jQLite包裝了是牢，所以我們就在進(jìn)行DOM操作的時(shí)候就不需要再使用 $()來(lái)進(jìn)行包裝僵井。
三：attrs參數(shù)，它包含了該指令所在元素的屬性的標(biāo)準(zhǔn)化參數(shù)對(duì)象驳棱。
4批什、scope[boolean or object]屬性，該屬性是用來(lái)定義指令的scope的范圍社搅，默認(rèn)情況下是false驻债，也就是說(shuō)該指令繼承了父controller的scope，可以隨意的使用父controller的scope里的屬性形葬，但是這樣的話就會(huì)污染到父scope里的屬性合呐，這樣是不可取的。所以我們可以讓scope取以下兩個(gè)值：true和{}笙以。
當(dāng)為true的時(shí)候淌实，表示讓Angular給指令創(chuàng)建一個(gè)繼承于父scope的scope。
eg：
let myapp=angular.module('myapp',[])
myapp.controller('myctrl',['$scope',function($scope) {
? ? ? ? ?$scope.color='red';
}])
myapp.directive('hello',function() {
? ? ? ?return{
? ? ? ? ? ? ? ?restrict:'AECM',
? ? ? ? ? ? ? ?replace:true,
? ? ? ? ? ? ? ?template:'click me',
? ? ? ? ? ? ? ?scope:true猖腕，
? ? ? ? ? ? ? ?link:function(scope,elements,attrs) {
? ? ? ? ? ? ? ? ? ? ? ? ?elements.bind('click',function() {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? elements.css('background-color','blue');
? ? ? ? ? ? ? ? ? ? ? ? ?})
? ? ? ? ? ? ? ?}
? ? ? ? ?}
})
這里我們?yōu)楦竤cope定義了一個(gè)color的屬性拆祈，并賦值為red，在hello指令的scope屬性中谈息，我們給了true，所以angular就為這個(gè)指令創(chuàng)建了一個(gè)繼承于父scope的scope凛剥，然后在template屬性中侠仇，我們用{{}}使用了從父scope中繼承過(guò)來(lái)的color屬性，所以按鈕會(huì)是紅色的犁珠。
當(dāng)為{}的時(shí)候逻炊，表示創(chuàng)建一個(gè)隔離的scope，不會(huì)繼承父scope的屬性犁享。但是在有的時(shí)候我們也要需要訪問(wèn)父scope里的屬性或者方法余素，那么我們應(yīng)該怎么辦呢。angular早就為我們想到了這一點(diǎn)炊昆，有以下的三個(gè)辦法可以讓我們記性上面的操作：
一：使用@實(shí)現(xiàn)單向綁定桨吊，如果我們只給scope的這個(gè){}值的話威根，那么上面代碼的按鈕的背景色將會(huì)是灰色的。
视乐，而如果我們需要使用父scope的color屬性的時(shí)候洛搀，我們可以這樣寫(xiě)：
eg:
scope{
? ? ? ? color:'@color'
}
<hello color="{{color}}"></hello>
這里有兩點(diǎn)需要注意：1、scope里的屬性color代表的是模板{{}}這個(gè)表達(dá)式里面的color佑淀，兩者必須一致留美。2、scope里的屬性color的值伸刃，也就是@后面的color谎砾，表示的是下面的HTML元素里的屬性color，所以這兩者也必須一致捧颅，當(dāng)這里的屬性名和模板里表達(dá)式{{}}里面使用的名稱(chēng)相同的話景图，就可以省略掉@后面的屬性名了，然后寫(xiě)成下面的形式隘道。
scope{
? ? ? ?color:'@'
}
從指令中scope的值可以看出症歇，指令模板中的表達(dá)式{{}}里的color的指向的是當(dāng)前元素元素的color屬性，這個(gè)color屬性的值就是父scope的屬性color的值谭梗。父scope把他的color屬性值傳遞給了當(dāng)前元素的color屬性忘晤，然后color屬性又把值傳遞給了模板中表達(dá)式里的color，這個(gè)過(guò)程是單向的激捏。
二：使用=實(shí)現(xiàn)雙向綁定
myapp.directive('hello',function() {
? ? ? ?return{
? ? ? ? ? ? ? ?restrict:'AECM',
? ? ? ? ? ? ? ?replace:true,
? ? ? ? ? ? ? ?template:'click me',
? ? ? ? ? ? ? ?scope:{
? ? ? ? ? ? ? ? ? ? ?color:'='
? ? ? ? ? ? ? ?},
? ? ? ? ? ? ? ?link:function(scope,elements,attrs) {
? ? ? ? ? ? ? ? ? ? ? ? elements.bind('click',function() {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? elements.css('background-color','blue');
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? scope.$apply(function() {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? scope.color='pink';
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ?}
? ? ? ? ? }
})
<hello color="{{color}}"></hello>
<input type="text" ng-model="color"/>
這里我們給指令的scope中的color屬性和父scope中的color屬性進(jìn)行了雙向綁定设塔，并且給指令的link函數(shù)里，添加了一個(gè)單擊事件远舅，點(diǎn)擊按鈕會(huì)讓按鈕的顏色發(fā)生變化闰蛔，并且改變指令scope的color屬性的值，再給HTML頁(yè)面中加了一個(gè)input標(biāo)簽图柏，輸出或者輸入父scope的color屬性的值序六。這里有一個(gè)地方需要注意：當(dāng)前元素的屬性名的值不用再加上{{}}這個(gè)表達(dá)式了，因?yàn)檫@里父scope傳遞的是一個(gè)真實(shí)的scope數(shù)據(jù)模型蚤吹，而不是簡(jiǎn)單的字符串例诀，所以這樣我們就可以傳遞簡(jiǎn)單的字符串、數(shù)組裁着、甚至復(fù)雜的對(duì)象給指令的scope》蓖浚現(xiàn)在讓我們來(lái)看看點(diǎn)擊這個(gè)按鈕將會(huì)發(fā)生什么。
這里我們能看到二驰，按鈕的顏色變成了粉色的扔罪，說(shuō)明點(diǎn)擊讓指令的scope的color屬性發(fā)生了變化，從而導(dǎo)致按鈕的顏色發(fā)生了變化桶雀。但是這里不僅僅是按鈕發(fā)生了變化矿酵，注意看唬复，input表單里的值也變成了pink，這就說(shuō)明父scope的color屬性也發(fā)生了變化坏瘩。 另外盅抚，再讓我們來(lái)給input里面輸入一個(gè)顏色，看看發(fā)生什么變化倔矾。
妄均，可以看出當(dāng)我們?cè)诒韱卫镙斎肓硗庖环N顏色的時(shí)候，按鈕的顏色也發(fā)生了變化哪自，這就說(shuō)明指令的scope的color屬性被改變了丰包。綜上我們可以發(fā)現(xiàn)使用'='實(shí)現(xiàn)的是雙向綁定。
三：使用&調(diào)用父scope里的方法
let myapp=angular.module('myapp',[])
myapp.controller('myctrl',['$scope',function($scope) {
? ? ? ?$scope.color='red';
? ? ? ?$scope.sayhello=function() {
? ? ? ? ? ? ?alert('hello');
? ? ? ?};
}])
myapp.directive('hello',function() {
? ? ? ?return{
? ? ? ? ? ? ?restrict:'AECM',
? ? ? ? ? ? ?replace:true,
? ? ? ? ? ? ?template:'click me',
? ? ? ? ? ? ?scope:{
? ? ? ? ? ? ? ? ? ? ?color:'=',
? ? ? ? ? ? ? ? ? ? ?sayhello:'&'
? ? ? ? ? ? ?},
? ? ? ? ? ? ?link:function(scope,elements,attrs) {
? ? ? ? ? ? ? ? ? ? ? elements.bind('click',function() {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?elements.css('background-color','blue');
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?scope.$apply(function() {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?scope.color='pink';
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?})
? ? ? ? ? ? ? ? ? ? ? ?})
? ? ? ? ? ? ? ? }
? ? ? ? }
})
這里我們也有兩個(gè)地方需要注意：1壤巷、我們不僅需要在模板中使用ng-click指令邑彪，綁定上要調(diào)用的父scope中的方法，而且要在給當(dāng)前元素添加一個(gè)屬性胧华，并且這個(gè)屬性指向要調(diào)用的父scope的方法寄症。2、指令scope的屬性sayhello矩动、當(dāng)前元素的屬性sayhello有巧、模板綁定的事件方法名sayhello這三者要一致。那么這樣我們就可以點(diǎn)擊按鈕悲没，彈出一個(gè)對(duì)話框了篮迎。
5、compile[function]參數(shù)示姿，該方法有兩個(gè)參數(shù)element甜橱，attrs，第一個(gè)參數(shù)element指指令所在的元素栈戳，第二個(gè)attrs指元素上賦予的參數(shù)的標(biāo)準(zhǔn)化列表岂傲。這里我們也有個(gè)地方需要注意：compile 函數(shù)不能訪問(wèn) scope，并且必須返回一個(gè) link 函數(shù)子檀。但是如果沒(méi)有設(shè)置 compile 函數(shù)镊掖，你可以正常地配置 link 函數(shù)，（有了compile命锄，就不能用link堰乔，link函數(shù)由compile返回）偏化。
myapp.directive('hello',function() {
? ? ? return{
? ? ? ? ? restrict:'AECM',
? ? ? ? ? replace:true,
? ? ? ? ? translude:true,
? ? ? ? ? template:'click me',
? ? ? ? ? scope:{
? ? ? ? ? ? ? ?color:'=',
? ? ? ? ? ? ? ?sayhello:'&'
? ? ? ? ?},
? ? ? ? ?compile:function(element,attrs) {
? ? ? ? ? ? ?returnfunction(scope,elements,attrs) {
? ? ? ? ? ? ? ? ?elements.bind('click',function() {
? ? ? ? ? ? ? ? ? ? ?elements.css('background-color','blue');
? ? ? ? ? ? ? ? ? ? ?scope.$apply(function() {
? ? ? ? ? ? ? ? ? ? ? ? ? scope.color='pink';
? ? ? ? ? ? ? ? ? ? ?})
? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? };
? ? ? ? ? }
? ? ? }
})
現(xiàn)在讓我們來(lái)點(diǎn)擊這個(gè)按鈕
我們發(fā)現(xiàn)脐恩，這里點(diǎn)擊按鈕之后發(fā)生的事情和前面用link屬性的一樣，這其實(shí)是沒(méi)有多少差別的侦讨。
其實(shí)在大多數(shù)的情況下驶冒，我們只需要使用 link 函數(shù)苟翻。這是因?yàn)榇蟛糠值闹噶钪恍枰紤]注冊(cè)事件監(jiān)聽(tīng)、監(jiān)視模型骗污、以及更新DOM等崇猫，這些都可以在 link 函數(shù)中完成。 但是對(duì)于像 ng-repeat 之類(lèi)的指令需忿，需要克隆和重復(fù) DOM 元素多次诅炉，在 link 函數(shù)執(zhí)行之前由 compile 函數(shù)來(lái)完成。那么為什么我們需要兩個(gè)分開(kāi)的函數(shù)來(lái)完成生成過(guò)程屋厘，為什么不能只使用一個(gè)涕烧？要回答好這個(gè)問(wèn)題，我們需要理解指令在Angular中是如何被編譯的汗洒！
6议纯、指令是如何被編譯的
當(dāng)我們的angular應(yīng)用引導(dǎo)啟動(dòng)的時(shí)候，angular將會(huì)使用$compile服務(wù)遍歷DOM元素溢谤，在所有的指令都被識(shí)別之后瞻凤，將會(huì)調(diào)用指令的compile方法，返回一個(gè)link函數(shù)世杀，然后將這個(gè)link函數(shù)添加到稍后執(zhí)行的 link 函數(shù)列表中阀参，這個(gè)過(guò)程被稱(chēng)為編譯階段。像ng-repeat這樣的指令玫坛，需要被重復(fù)克隆很多次结笨，compile函數(shù)只在編譯階段被執(zhí)行一次，并且復(fù)制這些模板湿镀，但是link 函數(shù)會(huì)針對(duì)每個(gè)被復(fù)制的實(shí)例被執(zhí)行炕吸。所以分開(kāi)處理，讓我們?cè)谛阅苌嫌幸欢ǖ奶岣撸ㄟ@句話有點(diǎn)不太理解勉痴，我是從別的地方copy過(guò)來(lái)的赫模。
7、controller[string or function]和require[string or string[]]參數(shù),當(dāng)我們想要允許其他的指令和你的指令發(fā)生交互時(shí)蒸矛，我們就需要使用 controller 函數(shù)瀑罗。當(dāng)另一個(gè)指令想要交互時(shí)，它需要聲明它對(duì)你的指令 controller 實(shí)例的引用(require)雏掠。
myapp.directive('hello',function() {
? ? ? return{
? ? ? ? ? ?scope:{},
? ? ? ? ? ?require:'^he',
? ? ? ? ? ?compile:function(element,attrs) {
? ? ? ? ? ? ? ? returnfunction(scope,elements,attrs,cntIns) {
? ? ? ? ? ? ? ? ? ? ? cntIns.fn()
? ? ? ? ? ? ? ? };
? ? ? ? ? ?}
? ? ? }
})
myapp.directive('he',function() {
? ? ? ?return{
? ? ? ? ? ? ?restrict:'AE',
? ? ? ? ? ? ?scope:{},
? ? ? ? ? ? ?controller:function($scope, $compile, $http) {
? ? ? ? ? ? ? ? ? this.fn=function() {
? ? ? ? ? ? ? ? ? alert('hello');
? ? ? ? ? ? ?};
? ? ? ? ?}
? ? }
})
<he>
<hello color="color"sayhello="sayhello()"></hello>
</he>
當(dāng)頁(yè)面加載完畢之后斩祭，會(huì)彈出一個(gè)對(duì)話框。
好了上面就是我這段時(shí)間學(xué)習(xí)angular乡话，所了解到的指令的知識(shí)摧玫，就先寫(xiě)到這里了。
