DoCow
  1. DoCow
  3. ng Formatadores e analisadores de modelo

ng Formatadores e analisadores de modelo

Eu postei a mesma pergunta de forma diferente, mas ninguém respondeu. Eu não estou conseguindo uma imagem clara do que os Formatadores e Analistas fazem em js angulares.

Pela definição, tanto os formatadores quanto os analisadores são parecidos comigo. Talvez eu esteja errado, pois sou novo nessa angular.

Definição de formatadores

Matriz de funções a serem executadas, como um pipeline, sempre que o valor do modelo for alterado. Cada function é chamada, por sua vez, passando o valor para o próximo. Usado para formatar / converter valores para exibição no controle e validação.

Parsers Definition

Matriz de funções para executar, como um pipeline, sempre que o controle ler valor do DOM. Cada function é chamada, por sua vez, passando o valor para o próximo. Usado para higienizar / converter o valor, bem como a validação. Para validação, os analisadores devem atualizar o estado de validade usando $ setValidity () e retornar undefined para valores inválidos.

Por favor, ajude-me a entender os dois resources com um exemplo simples. Uma ilustração simples de ambos será apreciada.

Este tópico foi abordado muito bem em uma questão relacionada: Como fazer filtragem bidirecional no AngularJS?

Para resumir:

  • Os formatadores alteram como os valores do modelo aparecerão na exibição.
  • Analisadores mudam como os valores da visão serão salvos no modelo.

Aqui está um exemplo simples, construindo um exemplo na documentação da API NgModelController : 

  //format text going to user (model to view) ngModel.$formatters.push(function(value) { return value.toUpperCase(); }); //format text from the user (view to model) ngModel.$parsers.push(function(value) { return value.toLowerCase(); });

Você pode vê-lo em ação: http://plnkr.co/UQ5q5FxyBzIeEjRYYVGX?plnkr=legacy

Quando você digita um nome em (view to model), você verá que o modelo está sempre em minúsculas. Mas, quando você clica em um botão e programaticamente altera o nome (modelo para exibição), o campo de input é sempre maiúsculo.

Outro uso para formatadores e analisadores é quando você deseja armazenar datas em hora UTC e exibi-las na hora local em inputs, criei a diretiva datepicker abaixo e o filtro utcToLocal para isso. 

 (function () { 'use strict'; angular .module('app') .directive('datepicker', Directive); function Directive($filter) { return { require: 'ngModel', link: function (scope, element, attr, ngModel) { element.addClass('datepicker'); element.pickadate({ format: 'dd/mm/yyyy', editable: true }); // convert utc date to local for display ngModel.$formatters.push(function (utcDate) { if (!utcDate) return; return $filter('utcToLocal')(utcDate, 'dd/MM/yyyy'); }); // convert local date to utc for storage ngModel.$parsers.push(function (localDate) { if (!localDate) return; return moment(localDate, 'DD/MM/YYYY').utc().toISOString(); }); } }; } })();

Ele usa esse filtro utcToLocal que garante que a data de input esteja no formato correto antes da conversão para a hora local. 

 (function () { 'use strict'; angular .module('app') .filter('utcToLocal', Filter); function Filter($filter) { return function (utcDateString, format) { if (!utcDateString) { return; } // append 'Z' to the date string to indicate UTC time if the timezone isn't already specified if (utcDateString.indexOf('Z') === -1 && utcDateString.indexOf('+') === -1) { utcDateString += 'Z'; } return $filter('date')(utcDateString, format); }; } })();

moment.js é usado para converter datas locais para utc.

pickadate.js é o plugin de datepicker usado

Intereting Posts