值属性的输入类型=“时间”绑定不会使用角度更新 UI

Input type="time" binding of value attribute doesn't update the UI with angular

本文关键字：UI 更新 绑定 输入 属性 类型 时间      更新时间：2023-09-26

我有一个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。但是，更新 UI 中的时间会更新 DOM 中的value属性。有人可以告诉我这里发生了什么。

注意：我正在使用Chrome（Firefox显示输入类型="time"作为普通文本输入）

我们正在尝试创建一个需要与另一个指令交互的指令/组件（在本例中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);
        }
    };
});

固定演示小提琴

我对角度一无所知，但Chrome，Opera和iOS Safari将支持日期/时间输入类型。 http://caniuse.com/input-datetime

相关文章：