角度電話號碼指令允許雙擊後的字母

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