在本文中，我們將一步一步學(xué)著創(chuàng)建一個(gè)用來輸入時(shí)間值的指令。我們的目標(biāo)是能夠?qū)⒁粋€(gè)普通的文本輸入字段變成一個(gè)能夠以HH:mm格式顯示時(shí)間的時(shí)間選擇器，但是將它以毫秒為單位存儲(chǔ)在我們的數(shù)據(jù)屬性中。

　　對(duì)于這個(gè)例子，我們的HTML非常簡(jiǎn)單，如下所示：

　　<input type='text' ng-model='timeOfDay' time-picker/>

　　顯然，我們需要在主頁(yè)中包含一個(gè)timePicker插件以便于它能夠被綁定在我們的input上。對(duì)于這個(gè)指令，我們首先來進(jìn)行一個(gè)最基本的定義，由于我們需要數(shù)據(jù)綁定功能，我們將從一開始就require ngModel:

　　.directive('timePicker',function(){    var today = new Date(new Date().toString());    return {        require: '?ngModel',        link: function($scope,$element,$attrs,ngModel){        }    }});  

　　注意到我們需要涉及元素的實(shí)際實(shí)例，因此我們所有的代碼基本上都位于linking函數(shù)中，我們?cè)诖送耆恍枰獡?dān)心編譯過程。我們同事也實(shí)例化了一個(gè)today變量來保存一個(gè)Date對(duì)象，以此在午夜十分更新。創(chuàng)建這個(gè)變量作為factory函數(shù)的一部分允許我們?cè)诙鄠€(gè)實(shí)例之間分享一個(gè)today變量。注意，盡管這允許我們將內(nèi)存的使用最小化，它也意味著如果我們的應(yīng)用在半夜還依然再運(yùn)行，我們的指令會(huì)開始提供不準(zhǔn)確的結(jié)果。如果你打算將這個(gè)指令用于一個(gè)實(shí)時(shí)應(yīng)用中，你最好創(chuàng)建另一個(gè)函數(shù)在第二天來臨時(shí)更新這個(gè)值?，F(xiàn)在，我們急需要看我們的controller函數(shù)：

　　link: function($scope.$element,$attrs,ngModel){    ngModel = ngModel || {        "$setViewValue" : angular.noop    }}  

　　你以前可能也注意過這種模式。一定要記住我們讓我們的controller有進(jìn)行選擇性的需求，因此如果有人想要使用我們的指令來綁定一個(gè)timepicker，而不需要由ngModel提供一個(gè)數(shù)據(jù)綁定，當(dāng)指令沒找到一個(gè)請(qǐng)求的controller時(shí)它也不會(huì)拋出一個(gè)錯(cuò)誤。在這里，如果ngModel被定義了，我們就使用它，否則，我們就使用自定義的那個(gè)對(duì)象，其中有一個(gè)noop函數(shù)。于是當(dāng)我們?cè)谥噶钪姓{(diào)用ngModel.$setViewValue時(shí)，如果沒有ng-Model綁定到我們的節(jié)點(diǎn)上，我們的代碼會(huì)繼續(xù)執(zhí)行。

　　說到ngModel.$setViewValue，我們來看看我們?nèi)绾谓壎ㄎ覀兊膖ime picker，以及我們?cè)谑裁吹胤綍?huì)需要這個(gè)函數(shù)：

　　link: function($scope,$element,$attrs,ngModel){    ..    var initialized = false;    setTimeout(function(){        initialized = $element.timepicker()            .on('changeTime',function(ev,ui){               var sec = $element.timepicker('getSecondsFrimMidnight');                ngModel.$setViewValue(sec * 1000);            });    });}

　　毫無(wú)疑問的，你的第一個(gè)問題肯定是關(guān)于setTimeout的，因?yàn)樗渲芯尤粵]有實(shí)際的延時(shí)數(shù)字。因?yàn)槲覀兲幱趌inking函數(shù)中，我們的$element是完全被實(shí)例化的，因此這種小技巧是沒有必要的。但是我們還是推薦使用這種辦法。

　　現(xiàn)在我們來看看我們?nèi)绾问褂?setViewValue。因?yàn)槲覀冎耙呀?jīng)獲得了一個(gè)分享的ngModel的實(shí)例，我們現(xiàn)在可以在我們的指令中調(diào)用$setViewValue函數(shù)，它將幫助我們鏈接我們的插件和數(shù)據(jù)模型。記住這是用來接受顯示值的，它可以進(jìn)行任何必要的解析，然后將它儲(chǔ)存在數(shù)據(jù)屬性中。timepicker插件將會(huì)發(fā)送一個(gè)changeTime時(shí)間，只要用戶更新了在我們的input中顯示的時(shí)間，因此我們使用它來了解應(yīng)該何時(shí)改變內(nèi)部值。在我們的時(shí)間處理函數(shù)內(nèi)部，我們只需要獲得自午夜以來的秒數(shù)，對(duì)此插件提供了一個(gè)方便的方法，然后將它乘以1000并傳遞給$setViewValue。當(dāng)我們完成了以上過程，我們的數(shù)據(jù)將會(huì)經(jīng)歷以下的步驟：

　　一旦我們將我們的timepicker實(shí)例化完成并監(jiān)聽視圖上的變化，我們的下一步就是要定義$render方法，它將負(fù)責(zé)將數(shù)據(jù)值轉(zhuǎn)換為合適的顯示或者視圖值。只要我們指令內(nèi)部的數(shù)值發(fā)生變化，它就會(huì)發(fā)生，包括第一次實(shí)例化時(shí)：

　　link : function ($scope, $element, $attrs, ngModel) {     ...     ngModel.$render = function (val) {       if (!initialized) {       //如果$render在我們的timepicker插件準(zhǔn)備好之前就被調(diào)用，返回           return; };       $element.timepicker('setTime', new Date(today.getTime() + val));     }}  

　　再次，注意到我們實(shí)際上重定義了$render方法，因此當(dāng)ngModel觀察到一個(gè)數(shù)據(jù)變化時(shí)，它告訴控制器來執(zhí)行$render，這時(shí)我們定義的$render就被調(diào)用了。我們所需要做的僅僅是將數(shù)據(jù)模型的值轉(zhuǎn)換成為我們的插件期待的值。在這個(gè)例子中，timepicker插件提供了一種方法來設(shè)置時(shí)間顯示。因?yàn)槲覀兊臅r(shí)間以毫秒存儲(chǔ)，當(dāng)我們需要渲染一個(gè)值時(shí)，我們只需要簡(jiǎn)單地從today獲取時(shí)間，加上我們的新值，然后用這個(gè)值創(chuàng)建一個(gè)Date對(duì)象即可。當(dāng)我們完成時(shí)，我們的數(shù)據(jù)將會(huì)通過以下步驟返回到視圖中：

 主要在于12行的scope：false，這個(gè)是默認(rèn)的，其實(shí)你不寫也是false。這樣drective繼承了父scope，所以可以調(diào)用父作用域的方法，而聲明新的scope即scope：｛｝形式就不會(huì)繼承了，不過你依然可以用scope.$parent.myFunction()的方式調(diào)用。

　正如很多文章所說的一樣，指令是AngularJS的靈魂，只有真正熟練掌握了Angular 指令，才有希望成為AngularJS高手。在編寫Angular指令時(shí)，我們最常用到的就是其中的link函數(shù)，它用來與scope中的數(shù)據(jù)進(jìn)行交互并綁定一些事件，例如click等等。但是如果我們想要編寫一些高級(jí)的指令，例如要在指令之間進(jìn)行相互交流的指令，我們就必須用到Angular指令中的controller。
　　指令中的controller是一個(gè)難點(diǎn)，我們也很少會(huì)用到它。一般來說，我們最常用到需要進(jìn)行交互的指令就是ngModel。如果你想要?jiǎng)?chuàng)建一個(gè)自定義input，或者甚至是想綁定一個(gè)需要制定格式的input插件，ngModel都會(huì)為你提供你所需要的方法，它會(huì)幫助你在你的數(shù)據(jù)模型和插件之間進(jìn)行交互。
　　在本文中，我們將一步一步學(xué)著創(chuàng)建一個(gè)用來輸入時(shí)間值的指令。我們的目標(biāo)是能夠?qū)⒁粋€(gè)普通的文本輸入字段變成一個(gè)能夠以HH:mm格式顯示時(shí)間的時(shí)間選擇器，但是將它以毫秒為單位存儲(chǔ)在我們的數(shù)據(jù)屬性中。