javascript - 为什么我的 Angular Directive(指令)会导致在按 Tab 键切换到另一个字段时删除不完整的值？

Question

在我正在进行的一个项目中，我有一个美国电话指令，这给我带来了一些麻烦。缺点是，如果您输入不完整的值并按 Tab 键切换到另一个字段，该值就会丢失。

我创建了a plunker of the problem in motion ，违规指令如下:

angular.module('app').directive('someInput', [
  '$filter', someInputDir
]);

function someInputDir($filter) {
  return {
    require: 'ngModel',
    link: function (scope, element, attrs, ctrl) {
      // Build mask.
      var mask = '(999) 999-9999';
      if (attrs.useExtension)
        mask += attrs.useExtension.toLowerCase() === 'true' ? '? x99999' : '';

      $(element).mask(mask);

      var nonDigitCharacters = /[^0-9]/g;

      // HACK: It turns out that angular and the jQuery Masked Input plugin
      // don't play nicely together.  In order for the masked input to work properly,
      // we have to bind an event handler for key down events (since Masked Input
      // blocks key down events) and force a change event to get the parsers to work
      // properly.
      element.on('keydown', function (evt) {
        scope.$evalAsync(element.triggerHandler.bind(element, 'change', evt));
      });

      ctrl.$validators.minLength = function (modelValue) {
        var minLength = 0;
        if (attrs.minlength)
          minLength = parseInt(attrs.minlength);

        var stringValue = $filter('tel')(modelValue, false),
            longEnough = stringValue.length >= minLength;

        // If value not required, and nothing is entered, the value is valid.
        if (!attrs.required && stringValue.length === 0)
          return true;

        // If value is required, and nothing is entered, this value is 'valid'.
        // The point of this code is to not interfere with a required attribute!
        if (attrs.required && stringValue.length === 0)
          return true;

        return longEnough;
      };

      ctrl.$parsers.unshift(function(viewValue) {
        var digitsOnly = viewValue.replace(nonDigitCharacters, '');                  
        return digitsOnly;
      });

      ctrl.$formatters.push(function (value) {
        return $filter('tel')(value, false);
      });
    }
  };
}

起初，我认为这是我创建的自定义 $validator 来模拟最小长度验证(此实现会导致常规最小长度由于掩码而无法正常工作。)但是，在我的plunker，您会看到我制作了一个没有 $validator 的版本，它也有完全相同的问题。

问题:我不明白该指令会导致在模糊时删除不完整的值。另外，如何防止无效值被删除，但允许该字段仍然被标记为无效？

Answer 1

看起来您的 JQuery maskedinput 插件有问题。尝试将 $(element).mask(mask); 更改为 $(element).mask(mask, {autoclear:false});

这是经过更改的 plunker http://plnkr.co/edit/b1knRUgREox2Su8xdVIN