在本文中，我們將一步一步學(xué)著創(chuàng)建一個(gè)用來(lái)輸入時(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è)指令，我們首先來(lái)進(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)心編譯過(guò)程。我們同事也實(shí)例化了一個(gè)today變量來(lái)保存一個(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ù)在第二天來(lái)臨時(shí)更新這個(gè)值?，F(xiàn)在，我們急需要看我們的controller函數(shù)：

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

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

　　說(shuō)到ngModel.$setViewValue，我們來(lái)看看我們?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ú)疑問(wèn)的，你的第一個(gè)問(wèn)題肯定是關(guān)于setTimeout的，因?yàn)樗渲芯尤粵](méi)有實(shí)際的延時(shí)數(shù)字。因?yàn)槲覀兲幱趌inking函數(shù)中，我們的$element是完全被實(shí)例化的，因此這種小技巧是沒(méi)有必要的。但是我們還是推薦使用這種辦法。

　　現(xiàn)在我們來(lái)看看我們?nèi)绾问褂?setViewValue。因?yàn)槲覀冎耙呀?jīng)獲得了一個(gè)分享的ngModel的實(shí)例，我們現(xiàn)在可以在我們的指令中調(diào)用$setViewValue函數(shù)，它將幫助我們鏈接我們的插件和數(shù)據(jù)模型。記住這是用來(lái)接受顯示值的，它可以進(jìn)行任何必要的解析，然后將它儲(chǔ)存在數(shù)據(jù)屬性中。timepicker插件將會(huì)發(fā)送一個(gè)changeTime時(shí)間，只要用戶更新了在我們的input中顯示的時(shí)間，因此我們使用它來(lái)了解應(yīng)該何時(shí)改變內(nèi)部值。在我們的時(shí)間處理函數(shù)內(nèi)部，我們只需要獲得自午夜以來(lái)的秒數(shù)，對(duì)此插件提供了一個(gè)方便的方法，然后將它乘以1000并傳遞給$setViewValue。當(dāng)我們完成了以上過(guò)程，我們的數(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í)，它告訴控制器來(lái)執(zhí)行$render，這時(shí)我們定義的$render就被調(diào)用了。我們所需要做的僅僅是將數(shù)據(jù)模型的值轉(zhuǎn)換成為我們的插件期待的值。在這個(gè)例子中，timepicker插件提供了一種方法來(lái)設(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ì)通過(guò)以下步驟返回到視圖中：