javascript - 值属性的输入类型 ="time"绑定(bind)不会使用 Angular 更新 UI

Question

我有一个 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 将 input type="time"显示为普通文本输入)

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