Директива об угловых номерах телефонов позволяет вводить буквы после двойного нажатия

Question

Директива об угловых номерах телефонов позволяет вводить буквы после двойного нажатия

0

У меня есть директива, которая позволяет только номера и форматирование. Он помещает форматирование в соответствующие позиции, т.е. 123-123-1234

Проблема заключается в том, когда вы вводите письмо в первый раз, когда он не будет отображаться, но если вы наберете SAME letter второй раз, он покажет, что 12r

вот код директивы:

app.directive('phoneNumber', function() {
   return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, el, atts, ngModel) {

      /* called when model is changed from the input element */
      ngModel.$parsers.unshift(function(viewValue) {

        var numbers = viewValue.replace(/\D/g, ''),
            char = {3:'-',6:'-'};
        numbers = numbers.slice(0, 10);
        viewValue = '';

        for (var i = 0; i < numbers.length; i++) {
            viewValue += (char[i]||'') + numbers[i];
        }

        // set the input to formatted value
        el.val(viewValue);

        return viewValue;
      });

      /* called when model is changed outside of the input element */
      ngModel.$formatters.push(function(modelValue) {
        return modelValue; 
      });

    }
  }
});

Вот демонстрация. введите число, за которым следует буква. вы не увидите письмо. Затем снова напечатайте ТАМОЕ письмо, и вы увидите письмо. Если вы нажмете другую букву, вы ее не увидите: https://plnkr.co/edit/Qp1o8wuNh0doQ4hGZR1E?p=preview

Jason 18 авг. 2016, в 18:50

Источник

Теги:

angularjs

angularjs-directive

1 ответ

Ещё вопросы

stephen.vakil · Accepted Answer · 2016-08-18T18-19-00.000Z

Это в значительной степени идентично вопросу/вопросу о угловом github. Здесь

$ parsers предназначен для преобразования (копии) $ viewValue перед тем, как "сохранить" его как $ modelValue (и это то, что делает ваш пример). Это фактически не изменяет $ viewValue (хотя он обновляет значение элемента), что приводит к неожиданному поведению.

Он показывает некоторые примеры того, что происходит с $viewValue чего вы не ожидаете в этом сценарии.

Итак, вам нужно что-то сделать для обновления viewValue. Ссылка предлагает лучший подход.

См. Plunker: https://plnkr.co/edit/QhbMtIMZGMxFYW3vVef9?p=preview

// set the input to formatted value
// el.val(viewValue);
ngModel.$viewValue = viewValue; // Update the '$viewValue'
ngModel.$commitViewValue(); //update $$lastCommittedViewValue
ngModel.$render(); // Update the element displayed value

Огромное спасибо. это сработало отлично!