AngularJS: повторно применить средство форматирования после выполнения парсера - PullRequest
0 голосов
/ 31 октября 2019

Я написал пользовательскую директиву в приложении AngularJS, которую я применяю для ввода текста. Директива определяет parser для преобразования пользовательского ввода в число. В то же время директива также определяет formatter, который интерпретирует число из модели и преобразует его обратно в текстовый ввод для отображения. Это выглядит примерно так:

qvangular.directive('mydirective', function ($filter) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, ngModelCtrl) {
            ngModelCtrl.$parsers.unshift(function(v) {
                return convertToNumber(v);
            });
            ngModelCtrl.$formatters.unshift(function(v) {
                return formatNumber(v);
            });
        }
    };
});

Это вроде работает, но проблема у меня заключается в следующем: при таком подходе форматтер запускается только тогда, когда модель данных изначально привязана (или когда ее значение изменяется в коде), но он не запускается, когда модель изменяется из пользовательского ввода. Я хотел бы, чтобы средство форматирования запускалось после того, как пользователь изменил входные данные (и входные данные были интерпретированы синтаксическим анализатором и применены к модели). Есть ли способ сделать это?

РЕДАКТИРОВАТЬ: практический пример, если вопрос не был ясен:

  1. Пользователь вводит «1K» в текстовое поле
  2. Когда текстовое поле теряет фокус, функция синтаксического анализатора запускается и вызывает convertToNumber("1K"), который преобразует строку в число 1000 и возвращает ее
  3. Значение 1000 применяется к модели
  4. Теперь я хотел бы, чтобы функция форматирования выполнялась , чтобы она могла прочитать значение 1000 и преобразовать его в то, что я хочу отобразить, например "1,000.00"

Шаг 4 - это то, чего не хватает , я не знаю, как заставить AngularJS «переоценить модель» и, таким образом, повторно применить средство форматирования.

Ответы [ 2 ]

1 голос
/ 31 октября 2019

Одним из распространенных решений было бы связать событие blur и отформатировать там значение:

element.bind('blur', () => {
     let value = element.val();
     let formatted = formatNumber(value);    
     element.val(formatted);
});
0 голосов
/ 31 октября 2019

В моих входных масках я фактически заново отображаю значение вида модели в парсере:

ngModelCtrl.$parsers.unshift(function(v) {
  ngModelCtrl.$setViewValue(formatNumber(v));
  ngModelCtrl.$render();
  return convertToNumber(v);
});
...