指令不更新範圍變量

Question

我有一個指令，將電話號碼格式爲（xxx）xxx-xxxx。格式化按預期工作，但輸入字段上的模型不會更新，除非輸入一個通過標準10的字符。所以在用戶輸入10位數字後，數字會自動在輸入字段內格式化。但是在ng-model上設置的範圍變量不會保存格式，除非輸入一個附加字符。

這裏的指令：

(function (app) { 
    'use strict'; 

    app.directive('formatPhone', [ 
    function() { 
     return { 
     require: 'ngModel', 
     restrict: 'A', 
     link: function(scope, elem) { 
      elem.on('keyup', function() { 
      var origVal = elem.val().replace(/[^\d]/g, ''); 
      if(origVal.length === 10) { 
       var str = origVal.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3'); 
       var phone = str.slice(0, -1) + str.slice(-1); 
       jQuery('#phonenumber').val(phone); 
      } 

      }); 
     } 
     }; 
    } 
    ]); 
}(window.app)); 

這裏是輸入字段，使用該指令作爲一個屬性：

<input type="text" placeholder="Phone" name="phone" id="phonenumber" class="user-search-input create-short form-control" ng-model="userCtrl.userPost.user.phoneNumber" required format-phone> 

我試着加入$watch它，也沒有運氣。

Answer 1

嘗試像

.directive('formatPhone', [ 
    function() { 
     return { 
      require: 'ngModel', 
      restrict: 'A', 
      priority:999999, //<-- Give a higher priority 
      scope: {   
       model:'=ngModel' //<-- A 2 way binding to read actual bound value not the ngModel view value 
      }, 
      link: function(scope, elem, attrs, ctrl) { 
       var unwatch = scope.$watch('model', function(val){ 
         if(!val) return; 
         var origVal = val.replace(/[^\d]/g, ''); 
         if(origVal.length === 10) { 
          var str = origVal.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3'); 
          var phone = str.slice(0, -1) + str.slice(-1); 
          ctrl.$setViewValue(phone); 
          ctrl.$render(); 
          unwatch(); 
         } 
       }); 
      } 
     }; 
    } 
]);