Пользовательский разделитель символов с 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

Из моего понимания кода примера, я думаю, вы пытаетесь добавить тире после каждых четырех символов. То есть, когда пользователь вводит «aaaabbbbcccc», вы ожидаете, что «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