INPUT TYPE =「時間」屬性值的結合不更新具有角

Question

的UI我有type="time"一個input標籤如下

<input type='time' id='from' ng-model='data.hall.occupancy.timeRange.from' datify value="{{data.hall.occupancy.timeRange.from | propertime}}"/> 

在過濾器和指令是如下

app.directive('datify',function(){ 
return { 
    require:'ngModel', 
    link:function(scope,element,attrs,modelCtrl){ 
     modelCtrl.$parsers.push(function(inputValue){ 
      var times = inputValue.split(":"); 
      var hours = times[0]; 
      var mins = times[1]; 
      var currentDate = new Date(); 
      var outputDate = new Date(currentDate.getFullYear(),currentDate.getMonth(),currentDate.getDate(),hours,mins); 
      return outputDate.toString(); 
     }); 
    } 
}; 
}); 

app.filter('propertime',function(){ 
return function(timeStamp){ 
    if(timeStamp){ 
     var dateObj = new Date(timeStamp.toString()); 
     var date = dateObj.getDate(); 
     var month = dateObj.getMonth()+1; 
     var year = dateObj.getFullYear(); 
     var hours = (0+ dateObj.getHours().toString()).slice(-2); 
     var minutes = (0+ dateObj.getMinutes().toString()).slice(-2); 
     return hours+":"+minutes;//+" "+date+"/"+month+"/"+year; 
    } 
} 
}); 

鏈接到我的plnkr：http://plnkr.co/edit/G4G5V62Y70IBvXUXdvQT?p=preview

input標記的value屬性在DOM中正確更新，但確實不會影響用戶界面。但是，更新UI中的時間，更新DOM中的value屬性。有人能告訴我這裏發生了什麼嗎？

注：我使用的瀏覽器（Firefox中顯示輸入型=「時間」作爲一個普通的文本輸入）

Answer 1

我們正在努力創建指令/組件需要與其他指令交互（ng-model在這種情況下）。

所以我們寫了require: 'ngModel',

後，我們解析輸入$parse(attrs.datify);

HTML

<input 
     type='time' 
     id='from' 
     datify='data.hall.occupancy.timeRange.from' 
     ng-model='data.hall.occupancy.timeRange.from' 
     value="{{data.hall.occupancy.timeRange.from | propertime}}" 
/> 

指令

app.directive('datify', function ($parse) { 
    return { 
     restrict: 'A', 
     require: 'ngModel', 
     link: function (scope, element, attrs, modelCtrl) { 
      var model = $parse(attrs.datify); 

      scope.$watch(model, function (value) { 
       if (value.toString().split(":").length == 2) { 
        backToDate(value) 
       } 
      }); // end watch 

      function backToDate(value) { 
       var times = value.split(":"); 
       var hours = times[0]; 
       var mins = times[1]; 
       var currentDate = new Date(); 
       var outputDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDay(), hours, mins); 
       modelCtrl.$setViewValue(outputDate); 
      } 

      function validate(value) { 
       console.log('into validate'); 
       var otherFieldValue = model(scope); 
       //console.log('validate:', value, otherFieldValue); 

       var times = value.toString().split(":"); 

       var hours = times[1]; 
       var mins = times[2].split(".")[0]; 
       var currentDate = new Date(); 

       var outputDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDay(), hours, mins); 
       //console.log("the date:", outputDate.toString()); 
       modelCtrl.$setViewValue(outputDate); 
       return outputDate; 
      } 

      modelCtrl.$formatters.push(validate); 
     } 
    }; 
}); 

固定演示Fiddle

Answer 2

我不知道棱角分明，但日期/時間輸入任何類型將在Chrome瀏覽器，Opera和Safari瀏覽器的iOS支持。 http://caniuse.com/input-datetime