Question

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

e.g。用户将1234插入输入字段，并将值解析为12:34

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

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

我创建了一个演示问题的小提琴：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);

请参阅RandomStringUtils。

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

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

1 个答案: