web-dev-qa-db-fra.com

Formateurs et analyseurs de ngModel

J'ai posté la même question sous une forme différente, mais personne n'a répondu. Je ne reçois pas une image claire de ce que les formateurs et les analyseurs syntaxiques font en angular js.

Par définition, les formateurs et les analyseurs syntaxiques me ressemblent. Peut-être que je me trompe, comme je suis nouveau dans cet angularjs.

Définition des formateurs

Tableau de fonctions à exécuter, en tant que pipeline, chaque fois que la valeur du modèle change. Chaque fonction est appelée à son tour, transmettant la valeur à la suivante. Utilisée pour formater/convertir les valeurs à afficher dans le contrôle et la validation.

Définition des analyseurs

Tableau de fonctions à exécuter, en tant que pipeline, chaque fois que le contrôle lit une valeur dans le DOM. Chaque fonction est appelée à son tour, en transmettant la valeur à la suivante. Utilisé pour purifier/convertir la valeur ainsi que pour la validation. Pour la validation, les analyseurs doivent mettre à jour l'état de validité à l'aide de $ setValidity (), et renvoyer indéfini pour les valeurs non valides.

S'il vous plaît aidez-moi à comprendre les deux fonctionnalités avec un exemple simple. Une illustration simple des deux sera appréciée.

angularjsangular-ngmodel
100
RAVI MONE

Ce sujet a été très bien traité dans une question connexe: Comment faire du filtrage bidirectionnel dans AngularJS?

Résumer:

  • Les formats modifient la manière dont les valeurs du modèle apparaîtront dans la vue.
  • Les analyseurs modifient la façon dont les valeurs de vue seront enregistrées dans le modèle.

Voici un exemple simple, basé sur un exemple dans documentation de l’API de 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();
  });

Vous pouvez le voir en action: http://plnkr.co/UQ5q5FxyBzIeEjRYYVGX?plnkr=legacy

<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" />

Lorsque vous tapez un nom dans (voir le modèle), vous verrez que le modèle est toujours en minuscule. Toutefois, lorsque vous cliquez sur un bouton et modifiez le nom par programme (modèle à afficher), le champ de saisie est toujours en majuscule.

153
j.wittwer

Une autre utilisation des formateurs et des analyseurs syntaxiques est lorsque vous souhaitez stocker des dates en heure UTC et les afficher en heure locale sur des entrées, j'ai créé la directive ci-dessous, datepicker, ainsi que le filtre utcToLocal.

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

Il utilise ce filtre utcToLocal qui garantit que la date d'entrée est au format correct avant la conversion en heure locale.

(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 est utilisé pour convertir les dates locales en dates utc.

pickadate.js est le plugin datepicker utilisé

5
Jason