前言：
????從移動(dòng)端剛?cè)腴T直接轉(zhuǎn)到前端angularJs快一年了，感覺(jué)還是在入門階段，只會(huì)使用一些簡(jiǎn)單的東西，所以平常有時(shí)間會(huì)按照入門的思路去補(bǔ)習(xí)一下angularjs的基礎(chǔ)部分，然后整理出來(lái)。這一篇的指令基礎(chǔ)，也整理了好兩天，借鑒了很多網(wǎng)上的文章，自己慢慢地寫(xiě)了一些小demo，基礎(chǔ)部分的東西理解是理解了，不過(guò)在實(shí)際工作中使用的話還是需要再多研究研究。整理出來(lái)分享給大家，讓像我一樣入門的新手也可以有個(gè)全面的了解。
概述
????angularJS中呢，有很多印象深刻的且方便的內(nèi)容，其中呢，數(shù)據(jù)雙向綁定和指令算是比較有特色的兩個(gè)內(nèi)容了，我們這呢就講講指令的學(xué)習(xí)。
????指令，就是用新屬性，來(lái)擴(kuò)展HTML，讓DOM元素有用特定的行為。就我個(gè)人對(duì)指令的理解，就是把一些復(fù)雜，復(fù)用性多的代碼或者代碼量大的插件之類的封裝成一個(gè)指令，在前端html頁(yè)面上使用，這樣既簡(jiǎn)化了頁(yè)面，優(yōu)化了代碼，也增加了工作效率。
????angularJS自己有很多內(nèi)置指令，一般前綴都是ng-，比如說(shuō)ng-model,ng-app,ng-show,ng-repeat等等。但這些也沒(méi)什么好說(shuō)的，因?yàn)檫@些基本上都是angular已經(jīng)封裝好的，直接使用就可以了。AngularJS內(nèi)置的指令外，我們還可以創(chuàng)建自定義指令。
自定義指令
指令的屬性
????首先先簡(jiǎn)略的看下自定義的一些基本上屬性和作用
| 屬性 | 作用 |
|---|---|
| restrict | 申明標(biāo)識(shí)符在模版中作為元素，屬性，類，注釋或組合，如何使用 |
| priority | 設(shè)置模版中相對(duì)于其他標(biāo)識(shí)符的執(zhí)行順序 |
| Template | 指定一個(gè)字符串式的內(nèi)嵌模版，如果你指定了模版是一個(gè)URL，那么是不會(huì)使用的 |
| tempateUrl | 指定URL加載的模版，如果你已經(jīng)指定了內(nèi)嵌的模版字符串，那么它不會(huì)使用的 |
| Replace | 如果為真，替換當(dāng)前元素，如果是假或未指定，拼接到當(dāng)前元素 |
| Transclude | 移動(dòng)一個(gè)標(biāo)識(shí)符的原始字節(jié)帶你到一個(gè)新模版的位置 |
| Scope | 為這個(gè)標(biāo)識(shí)符創(chuàng)建一個(gè)新的作用域，而不是繼承父作用域 |
| Controller | 創(chuàng)建一個(gè)控制器通過(guò)標(biāo)識(shí)符公開(kāi)通信API |
| Require | 當(dāng)前標(biāo)識(shí)符需要另外一個(gè)標(biāo)識(shí)符提供正確的函數(shù)功能 |
| Link | 通過(guò)代碼修改目標(biāo)DOM元素的實(shí)例，添加事件監(jiān)聽(tīng)，建立數(shù)據(jù)綁定 |
| Compile | 通過(guò)標(biāo)識(shí)符拷貝編程修改DOM模版 |
指令基礎(chǔ)屬性
????接下來(lái)我們簡(jiǎn)單的說(shuō)明下各個(gè)屬性的具體情況。
1.restrict(string)
????簡(jiǎn)單的一句話來(lái)解釋這個(gè)屬性是什么意思，就是決定你所寫(xiě)的自定義指令可以以哪幾種方式出現(xiàn)在你的代碼中。
????這個(gè)屬性的值有四個(gè)，也就是代表可以以四種不同的方式來(lái)使用。
| 值 | 樣式 | 概述 | 示例 |
|---|---|---|---|
| E | Element | 作為一個(gè)新的HTML元素來(lái)使用。 | <hello></hello> |
| A | Attribute | 作為一個(gè)元素的屬性來(lái)使用 | <div hello></div> |
| C | Class | 作為一個(gè)元素的類來(lái)使用 | <div class="hello"></div> |
| M | Comment | 作為注釋來(lái)使用 | <!--directive: hello --> |
????一般情況，我們常用的是EA，在第四個(gè)注釋中使用的時(shí)候，冒號(hào)后面得加一個(gè)空格，不然沒(méi)法用，不過(guò)這種注釋形式我們用的也比較少。一般情況下，我們?cè)趯?xiě)指令的時(shí)候可以不寫(xiě)restrict屬性，那樣就會(huì)默認(rèn)是A。
2.priority(number)
????這個(gè)屬性是來(lái)規(guī)定自定義的指令的優(yōu)先級(jí)的，意思就是一個(gè)DOM元素上有多個(gè)指令的時(shí)候，有限處理哪個(gè)就看這個(gè)值的設(shè)置。優(yōu)先級(jí)高的就先執(zhí)行。默認(rèn)是0.一般情況都不需要去設(shè)置。
3.templates(string or function)/tempateUrl
????規(guī)定了指令被Angular編譯和鏈接（link）后生成的HTML標(biāo)記,可以很簡(jiǎn)單，也可以很復(fù)雜，當(dāng)值是一個(gè)方法的時(shí)候，方法返回的就是代表模板的字符串，同事也可以在里面使用{{}}表達(dá)式。
template: function () {
return '<div>你好</div>';
}
????不過(guò)，通常情況下呢，template這個(gè)屬性都會(huì)被templateUrl取代掉，用它來(lái)指向一個(gè)外部的文件地址，所以我們通常把模板放在外部的一個(gè)HTML文件中，然后使用templateUrl來(lái)指向他。因?yàn)槲覀兿胍庋b成指令的那一塊html有時(shí)候代碼量會(huì)很大，或者是比較復(fù)雜，那么直接寫(xiě)在這個(gè)屬性下面需要拆分，會(huì)很麻煩，其實(shí)可以單獨(dú)寫(xiě)一個(gè)文件，然后在這個(gè)屬性下面寫(xiě)上地址指向這個(gè)文件。
????同時(shí)templateUrl用于指定將被加載的服務(wù)器文件，我們可以預(yù)緩存這些模版，減少get請(qǐng)求數(shù)，提高性能
4.Replace(boolean)
????這個(gè)屬性用來(lái)規(guī)定生成的HTML內(nèi)容是否會(huì)替換掉定義此指令的HTML元素。我們簡(jiǎn)單的寫(xiě)一個(gè)指令
var app = angular.module('testapp', []);
app.directive('hello',function(){
return {
restrict : 'E',
replace : true,
template : '<div>hello angular</div>'
};
});
????使用
<body ng-app="testapp">
<hello></hello>
</body>
????這個(gè)時(shí)候，我們的replace設(shè)置的是true，
????當(dāng)我們值設(shè)置為false時(shí)
兩者的差別在于，指令部分會(huì)不會(huì)被模板中的內(nèi)容所替換。
5.Transclude(boolean)
????這個(gè)屬性用來(lái)讓我們規(guī)定指令是否可以包含任意內(nèi)容,默認(rèn)為false，表示不開(kāi)啟，如果設(shè)置為true，則開(kāi)啟該屬性，當(dāng)開(kāi)啟后，則可以在模板中通過(guò)ng-transclude方式替換指令元素中的內(nèi)容。
????舉個(gè)例子來(lái)看
<body ng-app="testapp">
<hello>
哎呦我去
</hello>
</body>
<script>
var app = angular.module('testapp', []);
app.directive('hello',function(){
return {
restrict : 'E',
replace : true,
transclude: true,
template : '<div ng-transclude>hello angular</div>'
};
});
</script>
????頁(yè)面是這么顯示的：
????源碼里面則變成這樣：
????如果值為false，那么頁(yè)面會(huì)變成空白的。在我個(gè)人看來(lái)，這個(gè)屬性的設(shè)置，就是要把指令里面的內(nèi)容替換掉，移動(dòng)原始的內(nèi)容到新模版中，當(dāng)設(shè)置成為true時(shí)，標(biāo)識(shí)符會(huì)刪除原來(lái)的內(nèi)容,并通過(guò)ng-transclude標(biāo)識(shí)符使它重新插入到模版中，也可以這么用
<body ng-app="testapp">
<hello>
哎呦我去
</hello>
</body>
<script>
var app = angular.module('testapp', []);
app.directive('hello',function(){
return {
restrict : 'E',
replace : true,
transclude: true,
template : '<div>hello <span ng-transclude></span></div>'
};
});
</script>
????那么頁(yè)面會(huì)顯示 hello 哎呦我去。不過(guò)這個(gè)屬性我們平常寫(xiě)簡(jiǎn)單的指令的時(shí)候也不怎么用得著。
指令的編譯和鏈接函數(shù)
????上面說(shuō)了一些基本的屬性，基本屬性在理解上面相對(duì)比較簡(jiǎn)單，設(shè)置值也不復(fù)雜，但編譯和鏈接函數(shù)涉及到的東西就比較多了。我們?cè)诨A(chǔ)屬性中也只是把一些模板或者h(yuǎn)tml替換成指令，但是實(shí)際上的操作都是在編譯或者鏈接功能里面。這兩個(gè)功能是angular引用和創(chuàng)建實(shí)時(shí)視圖的后面步驟。
????angular初始化過(guò)程是這樣的。
| 流程 | 內(nèi)容 |
|---|---|
| 腳本加載 | 加載angular，查找ng-app標(biāo)識(shí)符找到應(yīng)用綁定 |
| 編譯階段 | 在這一階段，angular遍歷DOM標(biāo)志模版中所有注冊(cè)的標(biāo)志，對(duì)于每個(gè)標(biāo)識(shí)符，基于標(biāo)識(shí)符規(guī)則(template,replace,transclude等等）改造DOM，然后如果編譯函數(shù)存在就調(diào)用它，結(jié)果一個(gè)編譯的template函數(shù)，它會(huì)調(diào)用所有的標(biāo)識(shí)符搜集的link韓素 |
| 鏈接階段 | 為了讓視圖動(dòng)起來(lái)，angular為每個(gè)標(biāo)識(shí)符運(yùn)行l(wèi)ink函數(shù)，link函數(shù)通常在DOM或模型上創(chuàng)建監(jiān)聽(tīng)器，這些監(jiān)聽(tīng)器讓視圖和模型始終保持一致 |
????因此到了編譯階段，它處理轉(zhuǎn)換了模版，鏈接階段，它處理了修改視圖中的數(shù)據(jù)，沿著這些思路，標(biāo)識(shí)符中表一功能和鏈接功能主要區(qū)別就是鏈接功能轉(zhuǎn)換了模版自身，而連接功能在模型和視圖上創(chuàng)建了動(dòng)態(tài)鏈接，就是在第二階段，作用域scpoes被附加到了編譯過(guò)程的link功能上，通過(guò)數(shù)據(jù)綁定，標(biāo)識(shí)符變活了
1.Scope(boolean or object)
????該屬性是用來(lái)定義指令的scope的范圍，默認(rèn)情況下是false，也就是說(shuō)繼承了父控制器的scope，可以隨意使用父控制器中的scope里的屬性，但是有時(shí)候會(huì)污染到父scope的屬性，所以得另外設(shè)置。
????獲取作用域scope的三種選擇
- 標(biāo)識(shí)符DOM元素中已經(jīng)存在的作用域
- 創(chuàng)建一個(gè)繼承封閉的控制器作用域的新作用域，以便讀取結(jié)構(gòu)樹(shù)作用域的所有值。
- 獨(dú)立作用域，從父類中不繼承任何屬性，當(dāng)你需要隔離這個(gè)標(biāo)識(shí)符的操作和父類作用域時(shí)，創(chuàng)建可從用的組建來(lái)使用這個(gè)選項(xiàng)
| 三種方式 | 設(shè)置 |
|---|---|
| 已有作用域 | scope:false(如果沒(méi)有指定，這就是默認(rèn)值） |
| 新作用域 | scope:true |
| 獨(dú)立作用域 | scope:{屬性名次和綁定風(fēng)格｝ |
????舉個(gè)例子吧:首先是scope的值不設(shè)置的時(shí)候，默認(rèn)是false，和設(shè)置成true的時(shí)候，是都可以獲取到父作用域的屬性的。
<body ng-app="testapp" ng-controller="myCtrl">
<hello></hello>
</body>
<script>
var app = angular.module('testapp', []);
app.controller('myCtrl',['$scope', function ($scope) {
$scope.abc = '+abc是父作用域的屬性';
}]);
app.directive('hello',function(){
return {
restrict : 'E',
replace : true,
template : '<div>hello {{abc}}</div>',
scope:false,
link: function (scope) {
console.log(scope.abc)
}
};
});
</script>
????顯示結(jié)果都是
????但是如果把scope的值設(shè)置成{}，表示創(chuàng)建一個(gè)隔離的scope，不會(huì)繼承父scope的屬性。那么顯示的結(jié)果只有hello。但是在有的時(shí)候我們也要需要訪問(wèn)父scope里的屬性或者方法，我們可以通過(guò)標(biāo)識(shí)符屬性的鍵值對(duì)父類傳遞指定的屬性給獨(dú)立作用域
| 符號(hào) | 意義 |
|---|---|
| @ | 傳遞字符串屬性，你可以通過(guò)使用改寫(xiě){{}}屬性值從作用域中進(jìn)行數(shù)據(jù)綁定(單向綁定) |
| = | 數(shù)據(jù)綁定屬性在標(biāo)識(shí)符父作用域的屬性中 |
| & | 傳遞一個(gè)來(lái)自父作用域的函數(shù)，稍后調(diào)用 |
- @:如果父作用域的屬性內(nèi)容修改了，子作用域?qū)?yīng)的屬性內(nèi)容也會(huì)隨之修改，而如果子作用域?qū)傩詢?nèi)容修改了，是不會(huì)影響父作用域?qū)?yīng)的屬性內(nèi)容的。
????舉個(gè)例子
<body ng-app="testapp" ng-controller="myCtrl">
<input ng-model="name">
<hello name="{{name}}"></hello>
</body>
<script>
var app = angular.module('testapp', []);
app.controller('myCtrl',['$scope', function ($scope) {
}]);
app.directive('hello',function(){
return {
restrict : 'E',
replace : true,
template : '<div>hello {{name}}</div>',
scope:{
name:'@'
}
};
});
</script>
????那么結(jié)果顯示是
- =:創(chuàng)建一個(gè)父作用域與子作用域可以同時(shí)共享的屬性，即父作用域修改了該屬性，子作用域也隨之改變，反之亦然。
????舉個(gè)例子
<body ng-app="testapp" ng-controller="myCtrl">
<input type="text" ng-model="name" placeholder="Enter a name"><br>
{{name}}<br>
<hello name="name"></hello>
</body>
<script>
var app = angular.module('testapp', []);
app.controller('myCtrl',['$scope', function ($scope) {}]);
app.directive('hello',function(){
return {
restrict : 'E',
replace : true,
template : '<input type="text" ng-model="name">',
scope:{
name:'='
}
};
});
</script>
????那么結(jié)果顯示是
- &:可以在獨(dú)立的子作用域中直接調(diào)用父作用域的方法，在調(diào)用時(shí)可以向函數(shù)傳遞參數(shù)。
????舉個(gè)例子
<body ng-app="testapp" ng-controller="myCtrl">
<input type="text" ng-model="name" placeholder="Eneter a color">
{{name}}
<hello saysomething999="say();" name="hahahahhahah"></hello>
</body>
<script>
var app = angular.module('testapp', []);
app.controller('myCtrl',['$scope', function ($scope) {
$scope.say = function () {
alert('hello');
};
$scope.name = 'leifeng';
}]);
app.directive('hello',function(){
return {
restrict : 'E',
replace : true,
scope:{
name:'@'
},
template : '<button type="button" ng-bind="name" ng-init="saysomething();"></button>'
};
});
/script>
????那么結(jié)果顯示是
2.link(string or function)和compile(String or Array)
????在angularJs應(yīng)用啟動(dòng)之前，它們是以HTML文本形式存在文本編輯器當(dāng)中。應(yīng)用啟動(dòng)會(huì)進(jìn)行編譯和鏈接，作用域會(huì)同HTML進(jìn)行綁定。這個(gè)過(guò)程包含了兩個(gè)階段！
????在編譯的階段，angularJs會(huì)遍歷整個(gè)的文檔并根據(jù)JavaScript中指令定義來(lái)處理頁(yè)面上什么的指令。在遍歷的過(guò)程中，有可能一層套著一層，一直延深處遍歷。一但遍歷和編譯完畢就會(huì)返回一個(gè)叫做模板函數(shù)的函數(shù)。在這個(gè)函數(shù)沒(méi)被返回（return）之前我們可以對(duì)編譯后的DOM樹(shù)進(jìn)行修改。通常情況下，如果設(shè)置了compile函數(shù)，說(shuō)明我們希望在指令和實(shí)時(shí)數(shù)據(jù)被放到DOM中之前進(jìn)行DOM操作，在這個(gè)函數(shù)中進(jìn)行諸如添加和刪除節(jié)點(diǎn)等DOM操作是安全的。本質(zhì)上，當(dāng)我們?cè)O(shè)置了link選項(xiàng)，實(shí)際上是創(chuàng)建了一個(gè)postLink() 鏈接函數(shù)，以便compile() 函數(shù)可以定義鏈接函數(shù)。編譯函數(shù)(compile)負(fù)責(zé)對(duì)模板DOM進(jìn)行轉(zhuǎn)換。鏈接函數(shù)(link)負(fù)責(zé)將作用域和DOM進(jìn)行鏈接。
????compile和link區(qū)別在于
- compile函數(shù)的作用是對(duì)指令的模板進(jìn)行轉(zhuǎn)換；
- link作用是在模型和視圖之間建立關(guān)聯(lián)，包括在元素上注冊(cè)事件監(jiān)聽(tīng)；
- scope在鏈接階段才會(huì)被綁定到元素上，因此compile階段操作scope會(huì)報(bào)錯(cuò)；
- 對(duì)于同一個(gè)指令的多個(gè)實(shí)例，compile只會(huì)執(zhí)行一次；而link對(duì)于指令的每個(gè)實(shí)例都執(zhí)行一次；
- 一般情況下只需要寫(xiě)link函數(shù)就夠了；
- 如果編寫(xiě)自定義的compile函數(shù)，自定的link函數(shù)無(wú)效，因?yàn)閏ompile函數(shù)應(yīng)該返回一個(gè)link函數(shù)供后續(xù)處理
????簡(jiǎn)單的總結(jié)上面的話，就是一般情況我們不咋用compile，要注意 compile 函數(shù)不能訪問(wèn) scope，并且必須返回一個(gè) link 函數(shù)。但是如果沒(méi)有設(shè)置 compile 函數(shù)，你可以正常地配置 link 函數(shù)，（有了compile，就不能用link，link函數(shù)由compile返回）。
????compile函數(shù)可以寫(xiě)成如下的形式：
app.directive('test', function() {
return {
compile: function(tElem,attrs) {
//do optional DOM transformation here
return function(scope,elem,attrs) {
//linking function here
};
}
};
});
????指令生成的模板，在沒(méi)有邏輯支持下，只是顯示出來(lái)你想要的靜態(tài)效果而已，沒(méi)有實(shí)際作用，默認(rèn)情況下，指令并不會(huì)創(chuàng)建新的作用域，更多情況是使用父scope。意思就是在指令存在于一個(gè)控制器下，就會(huì)使用這個(gè)控制器的scope，但是在哪使用呢，這就需要link函數(shù)了。
????link函數(shù)中，有三個(gè)參數(shù)：
- scope：指令的scope，默認(rèn)是父控制器的scope。
- elem：指令元素
- attrs：一個(gè)包含了指令所在元素的標(biāo)準(zhǔn)化的參數(shù)對(duì)象。
????link函數(shù)主要用來(lái)為DOM元素添加事件監(jiān)聽(tīng)、監(jiān)視模型屬性變化、以及更新DOM。舉個(gè)簡(jiǎn)單的例子來(lái)看吧。
<body ng-app="testapp" ng-controller="myCtrl">
<hello></hello>
</body>
<script>
var app = angular.module('testapp', []);
app.controller('myCtrl',['$scope', function ($scope) {}]);
app.directive('hello',function(){
return {
restrict : 'E',
replace : true,
template : '<div id="hello" ng-mousemove="move()" ng-mouseleave="leave()">hello world</div>',
link : function(scope,element,attrs) {
scope.move = function () {
document.getElementById('hello').style.color = "red";
console.log("mousemove");
};
scope.leave = function () {
document.getElementById('hello').style.color = "black";
console.log('mouseleave')
}
}
}
});
</script>
????鼠標(biāo)移入變紅色，移除變黑色，頁(yè)面顯示是這樣的(動(dòng)態(tài)圖上看不到鼠標(biāo))：
3.controller(string or function)和require(String or Array)
????scope是指令與外界作用域通訊的橋梁，而require是指令與指令之間通訊的橋梁。這個(gè)參數(shù)最大的作用在于，當(dāng)要開(kāi)發(fā)單指令無(wú)法完成，需要一些組合型指令的控件或功能，例如日期控件，通過(guò)require參數(shù)，指令可以獲得外部其他指令的控制器，從而達(dá)到交換數(shù)據(jù)、事件分發(fā)的目的。require的作用是為了讓父子指令或者兄弟指令的controller之間搭建一個(gè)橋梁。也就是說(shuō)父指令里的controller里面的數(shù)據(jù)能分享給子指令的controller，其中子指令的link第四個(gè)參數(shù)的值是父指令的controller對(duì)象的作用域上下文。
????require有兩個(gè)修飾符號(hào):”?”、”^”
- ? : 如果require沒(méi)有找到相應(yīng)的指令避免報(bào)錯(cuò),還能確保程序的正常執(zhí)行
- ^ : 表示往父級(jí)查找
????controller屬性值是一個(gè)構(gòu)造函數(shù)，在創(chuàng)建父元素指令時(shí)添加，并可以在函數(shù)中創(chuàng)建多個(gè)屬性或方法。
????直接拿網(wǎng)上的一個(gè)小例子來(lái)說(shuō)明下。
<body ng-app="requireapp" ng-controller="myCtrl1">
<hello>
<div>hello</div>
<beautiful good>
beautiful
</beautiful>
</hello>
</body>
<script>
var app = angular.module('requireapp', []);
app.controller('myCtrl1',['$scope', function ($scope) {}]);
app.directive("hello",function(){
return {
restrict : "E",
controller : function($scope){
$scope.name = "張三";
this.information = {
name : $scope.name,
age : 25,
job : "程序員"
}
},
link : function(scope){}
}
});
app.directive("beautiful",function(){
return {
restrict : "E",
require : "?good",
controller : function(){
this.name = "beautiful";
},
link : function (scope,element,attrs,good) {
console.log(good.name)
}
}
});
app.directive("good",function(){
return {
restrict : "A",
require : "?^hello",
controller : function(){
this.name = "good";
},
link : function (scope,element,attrs,hello) {
console.log(hello.information)
}
}
});
</script>
????頁(yè)面顯示：
????控制臺(tái)顯示：
????我們簡(jiǎn)單的看下，html中首先寫(xiě)的是hello指令，這個(gè)指令只寫(xiě)了一個(gè)對(duì)象，里面有三個(gè)數(shù)據(jù)，name,age,job，值分別是張三，25，和程序員。很簡(jiǎn)單的指令。然后在hello指令內(nèi)部，有一個(gè)是div，就是頁(yè)面顯示hello的div，可以不看，再看下面的調(diào)用的beautiful指令，里面又使用了good指令，good的指令也是很簡(jiǎn)單的，聲明了在他的作用域內(nèi)，name屬性的值是good。同時(shí)往父級(jí)查找hello指令，沒(méi)找到也沒(méi)事。第三個(gè)指令是beautiful，內(nèi)部也是找good指令，link第四個(gè)參數(shù)的值是父指令的controller對(duì)象的作用域上下文。link方法內(nèi)部打印good的那么值，由上面我們看到的good指令，可以知道這個(gè)值就是good。good指令中打印的是hello指令的對(duì)象，打印出來(lái)的也就是hello指令里的對(duì)象。最后使用的時(shí)候就得到圖上的結(jié)果。
????感覺(jué)上面這一堆廢話說(shuō)了也沒(méi)啥用，總結(jié)出來(lái)一句話就是good的控制器跟hello的控制器進(jìn)行通信,beautiful又可以跟同級(jí)的good通信。
小結(jié)
????以上呢就是整理出來(lái)的全部?jī)?nèi)容，在我看到，比較重要的地方是在作用域那塊，因?yàn)槲覀兤匠Ｈ绻皇鞘褂靡恍┖?jiǎn)單的指令的時(shí)候，傳參調(diào)用數(shù)據(jù)這些是比較常用的，之前寫(xiě)一些簡(jiǎn)單的指令的時(shí)候總是在糾結(jié)模板中數(shù)據(jù)到底怎么去寫(xiě)，怎么傳入等等。別的像link，compie，controller的使用區(qū)別的話，細(xì)看看網(wǎng)上的一些文章也是比較好理解的。觸發(fā)的順序直接的差別，相互之間的關(guān)系我都有提到等等，
????在看完這些東西之后，可以自己試著寫(xiě)一個(gè)簡(jiǎn)單的指令，可以參照我之前一篇文章里寫(xiě)的時(shí)間選擇器來(lái)自己練習(xí)練習(xí)，順路還可以優(yōu)化下我寫(xiě)的那個(gè)粗糙的指令。另外廢話一句，大家要是看到有什么問(wèn)題的可以評(píng)論我們一起討論討論，因?yàn)槲乙彩莿傉沓鰜?lái)，對(duì)他的了解也并不是很全面，大家可以一起來(lái)聊聊。借鑒的一些文章就不貼了，百度下一堆，大家自便。
