ngModelのカスタム文字区切り記号が正しく動作していません

Question

文字区切り文字をAngularJsで入力して、入力した数字を書式設定します。

私は書式設定の指示を作成しました。このディレクティブは適切な出力を生成していますが、ngModelを適切に更新することはできません。

<input type="text" data-ng-model="aadhaar" dashsep="'-'"> 

.directive('dashsep', function($timeout) { 
    'use strict'; 
    return { 
    restrict: 'A', 
    scope: { 
     dashsep: '=', 
     ngModel: '=ngModel' 
    }, 
    require: '?ngModel', 
    link: function(scope, element, attr) { 
     element.bind("keyup", function (event) { 
      var formattedAdh = ""; 
      //console.log(element.val()); 

      var test = element.val().toString(); 

      for(var i=0;i<=test.length-1;i++){ 
       //console.log(test[i]); 
       if(i%4 === 0 && i>0){ 
        formattedAdh+= scope.dashsep; 
       } 
       formattedAdh += test[i]; 
      } 

      // Following script is not updateing the ngModel/textbox with the formatted value properly // 
      /* 
       //element.val(scope.$eval(formattedAdh)); 
       // OR 
       //scope.ngModel = formattedAdh; 
      */ 

      // Following output is showing proper value IF ABOVE SCRIPT IS COMMENTED // 
      console.clear(); 
      console.log(formattedAdh); 
     }); 
    } 
    }; 
}); 

Plunkerに完全なスクリプトが含まれています。

Answer 1

サンプルコードを理解してから、4文字ごとにダッシュを追加しようとしていると思います。つまり、ユーザーが「aaaabbbcccc」を入力すると、「aaaa-bbbb-cccc」がinput[text]に表示され、それに応じてスコープモデルが更新されます。

この仮定を前提として、スコープモデルの式を直接更新する代わりに、フォーマットされたビューの値で$setViewValueを呼び出すことをお勧めします。スコープモデル式を更新する前に$setViewValueが新しいビュー値をngModelControllerの内部ビュー値と内部モデル値と同期させるので、これは重要です。

新しいスコープモデルが正常に変更されたと仮定すると、つまり、パーサーとバリデーターが渡されたとしたら、$viewChangeListenersが実行されます。そこから、$renderに電話して、DOMを新しいビュー値で更新することができます。

変更点はplunkerです。

link: function(scope, element, attr, ngModelController) { 
    element.on('keyup', function (event) { 
     var viewValue = element.val().toString(); 

     // add a dash every 4 characters 
     if ((viewValue.length + 1) % 5 === 0) { 
     viewValue += scope.dashsep; 
     } 

     // angular updates the internal view value, internal model, then scope model based on DOM 
     ngModelController.$setViewValue(viewValue, event); 
    }); 


    ngModelController.$viewChangeListeners.push(function(){ 
     console.log(ngModelController.$modelValue); 
     // when model changes, call $render to display the latest view value 
     ngModelController.$render(); 
    }); 
}) 

あなたがngModelControllerのより詳細な説明を取得するために探しているなら、この記事は役立つかもしれない：https://medium.com/product-at-catalant-technologies/i-have-to-relearn-angulars-form-api-every-time-i-use-it-83287c521968#.f5hle083e