javascript - angular.js 显示模糊后的解析值

Question

我创建了一个适用于输入字段的指令，其中用户应该能够以多种可能的格式输入时间，然后该指令应该将用户输入解析为正确的时间格式

例如用户在输入字段中插入 1234，该值应解析为 12:34

该值已正确解析，但当输入失去焦点时，输入字段中的值仍为 1234，而不是更改为 12:34。

如何强制输入以显示解析后的值？

我创建了一个 fiddle 来演示这个问题:http://jsfiddle.net/t68ajjnv/1/

var app = angular.module("myModule", []);

app.controller("myController", function($scope){
    $scope.theTime = "00:00";
});

app.directive("myTime", function(){
    return {
        restrict: "A",
        require: "ngModel",
        link: function(scope, element, attrs, ngModel) {
            ngModel.$parsers.push(function(value) {
                if (value.length === 4) {
                    return value.substr(0,2) + ":" + value.substr(2,2);
                }
                if (value.length === 3) {
                    return "0" + value.substr(0,1) + ":" + value.substr(1,2);
                }
                if (value.length === 2) {
                    return value + ":00";
                }
                if (value.length === 1) {
                    return "0" + value + ":00";
                }
                return value;
            });
        }
    };
});

这只是解析器的一个简单示例实现，因此只需忽略其中的代码即可。

Answer 1

您可以向解析器函数添加额外的逻辑，以便在解析元素时更新元素。

angular.element(element).val(value);

参见http://jsfiddle.net/t68ajjnv/8/ .

这只会在模糊事件上更新，否则输入的更改将导致光标在键入每个字符后移动到输入的末尾。