Question

我的input标记为type="time"，如下所示

<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

value标记的input属性在DOM中正确更新，但不会影响用户界面。但是，在UI中更新时间会更新DOM中的value属性。有人能告诉我这里发生了什么。

注意：我使用的是Chrome（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和iOS Safari都支持日期/时间输入类型。 http://caniuse.com/input-datetime

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

2 个答案: