web-dev-qa-db-fra.com

AngularJS ng-model-options getter-setter

Je viens de passer à angular version 1.3.8.

Lors de l'utilisation de la version 1.2.23, j'ai créé une directive pour convertir la vue du formulaire de données en modèle et vice versa.

Voici ma directive:

.directive('dateConverter', ['$filter', function ($filter) {

    return {

        require: 'ngModel',

        link: function (scope, element, attrs, ngModelController) {

            // Convert from view to model
            ngModelController.$parsers.Push(function (value) {
                return $filter('date')(new Date(date), 'yyyy-MM-ddTHH:mm:ss')
            });

            // Convert from model to view
            ngModelController.$formatters.Push(function (datetime) {
                return $filter('date')(datetime, 'MM/dd/yyyy');
            });
        }
    };
}]);

});

Je vois ici que les getters et les setters dans la liaison sont maintenant supportés, mais je ne trouve nulle part comment utiliser les deux getters et setters. Y a-t-il un moyen de le faire? C'est-à-dire - ng-model-options peut-il remplacer ma directive convert?

Merci

angularjsgetter-setter
20
user2717436

La documentation peut sembler un peu floue mais l'utilisation est assez simple. Qu'as tu besoin de faire:

  1. HTML:

    <input ng-model="pageModel.myGetterSetterFunc"
ng-model-options=" {getterSetter: true }">

  2. dans le contrôleur JS, au lieu du modèle réel, créez une fonction qui renverra la valeur (+ appliquera la suppression) si aucun paramètre n'est envoyé et qui mettra à jour le modèle (+ appliquera d'autres modifications) si un paramètre est envoyé.

Le getter/setters est fondamentalement une autre "couche" entre la valeur de la vue et la valeur du modèle.

Exemple:

$scope.pageModel.firstName = '';
$scope.pageModel.myGetterSetterFunc: function (value) {
  if (angular.isDefined(value)) {
    $scope.pageModel.firstName = value + '...';
  } else {        
    return $scope.pageModel.firstName.substr(0,
      $scope.pageModel.firstName.lastIndexOf('...')
    );
  }
}

DÉMO PLUNKER: http://plnkr.co/edit/Zyzg6hLMLlOBdjeW4TO0?p=preview

(vérifiez la console - http://screencast.com/t/3SlMyGnscl )

REMARQUE: Il serait intéressant de voir comment cette échelle évoluerait en termes de réutilisabilité. Je conseillerais de créer ces getter/setters en tant que méthodes réutilisables externalisées et d'avoir des générateurs pour eux (car le modèle de données est différent pour chaque cas). Et dans les contrôleurs d'appeler uniquement ces générateurs. Juste mes 2 cents.

39
Dragos Rusu

Cette question est assez ancienne - mais pour IE9 + (et bien sûr tous les autres navigateurs pertinents), vous pouvez utiliser la méthode getter/setter ECMAScript 5 que je préférerais contre l'option getterSetter de ng-model:

var person = {
    firstName: 'Jimmy',
    lastName: 'Smith',
    get fullName() {
        return this.firstName + ' ' + this.lastName;
    },
    set fullName (name) {
        var words = name.toString().split(' ');
        this.firstName = words[0] || '';
        this.lastName = words[1] || '';
    }
}

person.fullName = 'Jack Franklin';
console.log(person.firstName); // Jack
console.log(person.lastName) // Franklin

Cet exemple provient de http://javascriptplayground.com/blog/2013/12/es5-getters-setters/

4
Gerfried