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

　　對于這個例子，我們的HTML非常簡單，如下所示：

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

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

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

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

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

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

　　說到ngModel.$setViewValue，我們來看看我們?nèi)绾谓壎ㄎ覀兊膖ime picker，以及我們在什么地方會需要這個函數(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);            });    });}

　　毫無疑問的，你的第一個問題肯定是關(guān)于setTimeout的，因為它其中居然沒有實際的延時數(shù)字。因為我們處于linking函數(shù)中，我們的$element是完全被實例化的，因此這種小技巧是沒有必要的。但是我們還是推薦使用這種辦法。

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

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

　　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));     }}  

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

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

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