У меня есть маска ввода с использованием угловой директивы. Я использую formatters
и событие blur
для форматирования значения модели для отображения, и я использую parsers
и событие focus
для удаления форматирования, когда пользователь редактирует текстовое поле.
Я получаю странное поведение в Internet Explorer, где, если вы используете клавишу Tab
чтобы потерять фокус, событие парсера (некорректно) срабатывает, поэтому значение модели обновляется некорректно.
Это угловая ошибка? Или есть что-то, что я делаю неправильно?
Вот скрипка: https://jsfiddle.net/capesean/htorwgs5/3/
Обратите внимание, что в IE, когда откроется окно консоли, вы увидите, что события выходят из системы.
Кроме того, тестирование этого в более ранней версии с угловым выражением, похоже, отлично работает: https://jsfiddle.net/htorwgs5/4/
Код директивы:
.directive("test", function () {
return {
restrict: "A",
require: 'ngModel',
link: function (scope, element, attr, ngModel) {
// for DOM -> model validation
ngModel.$parsers.unshift(function (value) {
console.log("parser");
ngModel.$setValidity('test', true);
return +value;
});
ngModel.$formatters.unshift(function (value) {
console.log("formatter");
ngModel.$setValidity('test', true);
return (value === undefined ? "" : value) + "!";
});
element.val(scope.minutes);
element.bind("blur", function () {
scope.$apply(function () {
console.log("blur");
element.val((scope.minutes === undefined ? "" : scope.minutes) + "@");
});
});
element.bind("focus", function () {
scope.$apply(function () {
console.log("focus");
element.val(scope.minutes);
});
});
}
};
})
Это известное поведение. Я опубликовал здесь отчет об ошибке: https://github.com/angular/angular.js/issues/14987
Решение заключалось в использовании $ timeout для задержки установки значения элемента, как это было предложено в ответе на отчет об ошибке.