ããå¨æ¬æä¸ï¼æ们å°ä¸æ¥ä¸æ¥å¦çå建ä¸ä¸ªç¨æ¥è¾å ¥æ¶é´å¼çæ令ãæ们çç®æ æ¯è½å¤å°ä¸ä¸ªæ®éçææ¬è¾å ¥å段åæä¸ä¸ªè½å¤ä»¥HH:mmæ ¼å¼æ¾ç¤ºæ¶é´çæ¶é´éæ©å¨ï¼ä½æ¯å°å®ä»¥æ¯«ç§ä¸ºåä½åå¨å¨æ们çæ°æ®å±æ§ä¸ã
ãã对äºè¿ä¸ªä¾åï¼æ们çHTMLé常ç®åï¼å¦ä¸æ示ï¼
ãã<input type='text' ng-model='timeOfDay' time-picker/>
ããæ¾ç¶ï¼æ们éè¦å¨ä¸»é¡µä¸å å«ä¸ä¸ªtimePickeræ件以便äºå®è½å¤è¢«ç»å®å¨æ们çinputä¸ã对äºè¿ä¸ªæ令ï¼æ们é¦å æ¥è¿è¡ä¸ä¸ªæåºæ¬çå®ä¹ï¼ç±äºæ们éè¦æ°æ®ç»å®åè½ï¼æ们å°ä»ä¸å¼å§å°±require ngModel:
ãã.directive('timePicker',function(){
var today = new Date(new Date().toString());
return {
require: '?ngModel',
link: function($scope,$element,$attrs,ngModel){
}
}
});
ãã注æå°æ们éè¦æ¶åå ç´ çå®é å®ä¾ï¼å æ¤æ们ææç代ç åºæ¬ä¸é½ä½äºlinkingå½æ°ä¸ï¼æ们å¨æ¤å®å ¨ä¸éè¦æ å¿ç¼è¯è¿ç¨ãæ们åäºä¹å®ä¾åäºä¸ä¸ªtodayåéæ¥ä¿åä¸ä¸ªDate对象ï¼ä»¥æ¤å¨åå¤ååæ´æ°ãå建è¿ä¸ªåéä½ä¸ºfactoryå½æ°çä¸é¨åå 许æ们å¨å¤ä¸ªå®ä¾ä¹é´å享ä¸ä¸ªtodayåéã注æï¼å°½ç®¡è¿å 许æ们å°å åç使ç¨æå°åï¼å®ä¹æå³çå¦ææ们çåºç¨å¨åå¤è¿ä¾ç¶åè¿è¡ï¼æ们çæ令ä¼å¼å§æä¾ä¸åç¡®çç»æãå¦æä½ æç®å°è¿ä¸ªæ令ç¨äºä¸ä¸ªå®æ¶åºç¨ä¸ï¼ä½ æ好å建å¦ä¸ä¸ªå½æ°å¨ç¬¬äºå¤©æ¥ä¸´æ¶æ´æ°è¿ä¸ªå¼ãç°å¨ï¼æ们æ¥éè¦çæ们çcontrollerå½æ°ï¼
ããlink: function($scope.$element,$attrs,ngModel){
ngModel = ngModel || {
"$setViewValue" : angular.noop
}
}
ããä½ ä»¥åå¯è½ä¹æ³¨æè¿è¿ç§æ¨¡å¼ãä¸å®è¦è®°ä½æ们让æ们çcontrolleræè¿è¡éæ©æ§çéæ±ï¼å æ¤å¦ææ人æ³è¦ä½¿ç¨æ们çæ令æ¥ç»å®ä¸ä¸ªtimepickerï¼èä¸éè¦ç±ngModelæä¾ä¸ä¸ªæ°æ®ç»å®ï¼å½æ令没æ¾å°ä¸ä¸ªè¯·æ±çcontrolleræ¶å®ä¹ä¸ä¼æåºä¸ä¸ªé误ãå¨è¿éï¼å¦ængModel被å®ä¹äºï¼æ们就使ç¨å®ï¼å¦åï¼æ们就使ç¨èªå®ä¹çé£ä¸ªå¯¹è±¡ï¼å ¶ä¸æä¸ä¸ªnoopå½æ°ãäºæ¯å½æ们å¨æ令ä¸è°ç¨ngModel.$setViewValueæ¶ï¼å¦æ没æng-Modelç»å®å°æ们çèç¹ä¸ï¼æ们ç代ç ä¼ç»§ç»æ§è¡ã
ãã说å°ngModel.$setViewValueï¼æ们æ¥ççæ们å¦ä½ç»å®æ们çtime pickerï¼ä»¥åæ们å¨ä»ä¹å°æ¹ä¼éè¦è¿ä¸ªå½æ°ï¼
ãã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);
});
});
}
ãã毫æ çé®çï¼ä½ ç第ä¸ä¸ªé®é¢è¯å®æ¯å ³äºsetTimeoutçï¼å 为å®å ¶ä¸å± ç¶æ²¡æå®é ç延æ¶æ°åãå 为æ们å¤äºlinkingå½æ°ä¸ï¼æ们ç$elementæ¯å®å ¨è¢«å®ä¾åçï¼å æ¤è¿ç§å°æå·§æ¯æ²¡æå¿ è¦çãä½æ¯æ们è¿æ¯æ¨è使ç¨è¿ç§åæ³ã
ããç°å¨æ们æ¥ççæ们å¦ä½ä½¿ç¨$setViewValueãå 为æ们ä¹åå·²ç»è·å¾äºä¸ä¸ªå享çngModelçå®ä¾ï¼æ们ç°å¨å¯ä»¥å¨æ们çæ令ä¸è°ç¨$setViewValueå½æ°ï¼å®å°å¸®å©æ们é¾æ¥æ们çæ件åæ°æ®æ¨¡åãè®°ä½è¿æ¯ç¨æ¥æ¥åæ¾ç¤ºå¼çï¼å®å¯ä»¥è¿è¡ä»»ä½å¿ è¦ç解æï¼ç¶åå°å®å¨åå¨æ°æ®å±æ§ä¸ãtimepickeræ件å°ä¼åéä¸ä¸ªchangeTimeæ¶é´ï¼åªè¦ç¨æ·æ´æ°äºå¨æ们çinputä¸æ¾ç¤ºçæ¶é´ï¼å æ¤æ们使ç¨å®æ¥äºè§£åºè¯¥ä½æ¶æ¹åå é¨å¼ãå¨æ们çæ¶é´å¤çå½æ°å é¨ï¼æ们åªéè¦è·å¾èªåå¤ä»¥æ¥çç§æ°ï¼å¯¹æ¤æ件æä¾äºä¸ä¸ªæ¹ä¾¿çæ¹æ³ï¼ç¶åå°å®ä¹ä»¥1000å¹¶ä¼ éç»$setViewValueãå½æ们å®æäºä»¥ä¸è¿ç¨ï¼æ们çæ°æ®å°ä¼ç»å以ä¸çæ¥éª¤ï¼
ããä¸æ¦æ们å°æ们çtimepickerå®ä¾åå®æ并çå¬è§å¾ä¸çååï¼æ们çä¸ä¸æ¥å°±æ¯è¦å®ä¹$renderæ¹æ³ï¼å®å°è´è´£å°æ°æ®å¼è½¬æ¢ä¸ºåéçæ¾ç¤ºæè è§å¾å¼ãåªè¦æ们æ令å é¨çæ°å¼åçååï¼å®å°±ä¼åçï¼å æ¬ç¬¬ä¸æ¬¡å®ä¾åæ¶ï¼
ããlink : function ($scope, $element, $attrs, ngModel) {
...
ngModel.$render = function (val) {
if (!initialized) {
//å¦æ$renderå¨æ们çtimepickeræ件åå¤å¥½ä¹å就被è°ç¨ï¼è¿å
return; };
$element.timepicker('setTime', new Date(today.getTime() + val));
}
}
ããå次ï¼æ³¨æå°æ们å®é ä¸éå®ä¹äº$renderæ¹æ³ï¼å æ¤å½ngModelè§å¯å°ä¸ä¸ªæ°æ®ååæ¶ï¼å®åè¯æ§å¶å¨æ¥æ§è¡$renderï¼è¿æ¶æ们å®ä¹ç$render就被è°ç¨äºãæ们æéè¦åçä» ä» æ¯å°æ°æ®æ¨¡åçå¼è½¬æ¢æ为æ们çæ件æå¾ çå¼ãå¨è¿ä¸ªä¾åä¸ï¼timepickeræ件æä¾äºä¸ç§æ¹æ³æ¥è®¾ç½®æ¶é´æ¾ç¤ºãå 为æ们çæ¶é´ä»¥æ¯«ç§åå¨ï¼å½æ们éè¦æ¸²æä¸ä¸ªå¼æ¶ï¼æ们åªéè¦ç®åå°ä»todayè·åæ¶é´ï¼å ä¸æ们çæ°å¼ï¼ç¶åç¨è¿ä¸ªå¼å建ä¸ä¸ªDate对象å³å¯ãå½æ们å®ææ¶ï¼æ们çæ°æ®å°ä¼éè¿ä»¥ä¸æ¥éª¤è¿åå°è§å¾ä¸ï¼