angularjs - ngModelo Formateadores y Analizadores

ng angular

Question

Publiqué la misma pregunta en una forma diferente, pero nadie contestó. No me estoy haciendo una idea clara de lo que hacen los formateadores y analizadores en ángulos js.

Según la definición, tanto los formateadores como los analizadores se parecen a mí. Tal vez estoy equivocado, ya que soy nuevo en este angularjs.

Definición de formateadores

Matriz de funciones para ejecutar, como una tubería, cada vez que cambia el valor del modelo. Cada función se llama, a su vez, pasando el valor a la siguiente. Se usa para formatear / convertir valores para mostrar en el control y la validación.

Definición de los analizadores

Matriz de funciones para ejecutar, como una tubería, siempre que el control lea el valor del DOM. Cada función se llama, a su vez, pasando el valor a la siguiente. Se usa para desinfectar / convertir el valor y la validación. Para la validación, los analizadores deben actualizar el estado de validez utilizando $ setValidity () y devolver indefinido para los valores no válidos.

Por favor, ayúdame a entender ambas características con un simple ejemplo. Se apreciará una simple ilustración de ambos.

Answer 1

Este tema fue cubierto muy bien en una pregunta relacionada: ¿Cómo hacer un filtrado de dos vías en angular.js?

Para resumir:

• Los formateadores cambian cómo los valores del modelo aparecerán en la vista.
• Los analizadores modifican cómo se guardarán los valores de vista en el modelo.

Aquí hay un ejemplo simple, basado en un ejemplo en la documentación de la 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();
  });

Puedes verlo en acción: http://plnkr.co/UQ5q5FxyBzIeEjRYYVGX

<input type="button" value="set to ''misko''" ng-click="data.name=''misko''"/>
<input type="button" value="set to ''MISKO''" ng-click="data.name=''MISKO''"/>
<input changecase ng-model="data.name" />

Cuando escribe un nombre en (ver para modelar), verá que el modelo siempre está en minúscula. Pero cuando hace clic en un botón y cambia programáticamente el nombre (modelo para ver), el campo de entrada siempre está en mayúscula.

Answer 2

Otro uso para los formateadores y analizadores sintácticos es cuando desea almacenar fechas en hora UTC y mostrarlas en la hora local en las entradas. Creé la siguiente directiva datepicker y el filtro utcToLocal para esto.

(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();
                });
            }
        };
    }
})();

Utiliza este filtro utcToLocal que asegura que la fecha de entrada está en el formato correcto antes de convertir a la 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 se usa para convertir las fechas locales a utc.

pickadate.js es el complemento de datepicker utilizado