Angular.js: O NgModel precisa de uma maneira de reexecutar manualmente a cadeia do formatador

Criado em 31 jul. 2013 · 3Comentários · Fonte: angular/angular.js

Veja este violino:
http://jsfiddle.net/tPWBK/1/

Digamos que você tenha uma diretiva de transformação de dados que requer 'ngModel' e adiciona às cadeias do formatador e do analisador. Se a transformação depende de alguns dados dinâmicos diferentes de $ modelValue ou $ viewValue, não há como fazer uma observação nesses dados e executar novamente a cadeia do formatador.

Veja este trecho de https://github.com/angular/angular.js/blob/master/src/ng/directive/input.js#L1081

$scope.$watch(function ngModelWatch() {
  var value = ngModelGet($scope);

  // if scope model value and ngModel value are out of sync
  if (ctrl.$modelValue !== value) {

    var formatters = ctrl.$formatters,
        idx = formatters.length;

    ctrl.$modelValue = value;
    while(idx--) {
      value = formatters[idx](value);
    }

    if (ctrl.$viewValue !== value) {
      ctrl.$viewValue = value;
      ctrl.$render();
    }
  }
});

Deve tudo dentro da verificação (ctrl. $ ModelValue! == value) ser uma função que é exposta publicamente no NgModelController?

forms feature

Fonte

jpsimons

👍7

Comentários muito úteis

+1 seria muito bom ter isso. a falta de formatadores e analisadores assíncronos torna o trabalho com dados assíncronos bastante desagradável. isso ajudaria a evitar algumas das condições de corrida introduzidas pela validação síncrona contra uma fonte de dados assíncrona.

para referência, fiz de maneira muito semelhante a @jpsimons :

scope.$watch('myAsyncCollection', () => {
  ngModel.$viewValue = ngModel.$formatters.reduceRight((prev, fn) => fn(prev)), ngModel.$modelValue)
  ngModel.$render()
})

bcherny em 27 mai. 2015

👍5

Todos 3 comentários

Bem, eu acho que alguém poderia simplesmente copiar esse bloco em uma diretiva. É tudo coisa pública. No entanto, seria útil ter uma função para fazer isso por você.

jpsimons em 31 jul. 2013

para referência, fiz de maneira muito semelhante a @jpsimons :

scope.$watch('myAsyncCollection', () => {
  ngModel.$viewValue = ngModel.$formatters.reduceRight((prev, fn) => fn(prev)), ngModel.$modelValue)
  ngModel.$render()
})

bcherny em 27 mai. 2015

👍5

apenas se alguém estiver pesquisando o snippet de código - ele mudou:
https://github.com/angular/angular.js/blob/master/src/ng/directive/ngModel.js#L822