我正在尝试创建一个将十进制值格式化为时间值h:mm
的指令。如果用户输入时间值,则应使用十进制表示更新模型。如果用户输入小数值,则应将其输入替换为格式化值。
我使用的指令如下:
<input type="text" hour-input ng-model="vm.hours"/>
以下是相关代码:
app.directive('hourInput', hourInput);
function hourInput() {
var directive = {
link: link,
restrict: 'A',
require: 'ngModel'
};
return directive;
function link(scope, element, attrs, ngModelController) {
// model -> view
ngModelController.$formatters.push(function (value) {
return formatTime(value);
});
// view -> model
ngModelController.$parsers.push(function (value) {
var result;
if (!/^\d?[\d,\.]*$/.test(value)) {
result = parseTime(value);
} else {
result = parseFloat(value);
}
return result;
});
}
}
function parseTime(value) {
// code removed for brevity
return hours + minutes / 60;
}
function formatTime(value) {
// code removed for brevity
return result;
}
这是plunker。与模型的交互正在发挥作用。但是,在UI中不会更新格式化的时间。
答案 0 :(得分:1)
ngModelController.$parsers
都会解析您的价值。由于您不知道用户何时准备输入值,因此无法在每次更新时真正解析该值。
假设你想允许值
解析器不是您想要的方式。 我认为当您在模糊或更改事件上附加函数时,您将获得所需的行为。
像
这样的东西element.bind('blur', function () {
element.val(formatTime(element.val()));
});