Açısal yönergem neden başka bir alana sekme ile tamamlanmamış değerlerin silinmesine neden oluyor?

Question

Üzerinde çalıştığım bir projede, bana bir sorun bildiren bir ABD telefon direktifim var. Kısacası, eksik bir değer ve başka bir alana sekme girerseniz, değer kaybolur.

Ben a plunker of the problem in motion oluşturduk ve kusurlu yönergesi aşağıdaki gibidir:

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); 
     }); 
    } 
    }; 
} 

İlk başta, ben bir MINLENGTH doğrulama simüle etmek oluşturulan özel $validator olduğunu düşündüm (bu uygulama için düzenli MINLENGTH neden olur Maske nedeniyle düzgün çalışmıyor.) Ancak, plunker'ımda, aynı soruna sahip olan $validator olmadan bir versiyon yaptığımı göreceksiniz.

Soru: Bu yönergenin ne anlama geldiğini anlamak için tamamlanmamış bir değerin bulanıklığa neden olduğunu anlamıyorum. Ayrıca, geçersiz değerin silinmesini de engelleyebilir miyim, ancak alanın geçersiz olarak etiketlenmesine izin verebilir miyim?

Answer 1

JQuery maskedinput eklentisiyle ilgili bir sorununuz var gibi görünüyor. deneyin değişikliği $(element).mask(mask); İşte

$(element).mask(mask, {autoclear:false}); değişiklikler http://plnkr.co/edit/b1knRUgREox2Su8xdVIN