角度电话号码指令允许双击后的字母

Question

我有一个指令，只允许数字和格式。它把格式在适当的位置即123-123-1234

问题是，当你键入一个字母第一次它不会显示，但如果你键入相同的信第二次，它会显示即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; 
     }); 

    } 
    } 
}); 

这里是一个演示。输入一个数字后跟一个字母。你不会看到这封信。然后再次输入SAME字母，你会看到这封信。如果你碰到不同的字母，你将看不到它： https://plnkr.co/edit/Qp1o8wuNh0doQ4hGZR1E?p=preview

Answer 1

这与角度github上的问题非常相似。每here

$解析器是“节能”作为$ modelValue之前，把在$ viewValue（复印件）（而这是你的榜样是做）。它实际上并没有改变$ 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's displayed value