AngularJS ng-model-options getter-setter

Ho appena aggiornato alla versione angular 1.3.8.

Quando utilizzo la versione 1.2.23 ho creato una direttiva per convertire la vista modulo dati in modello e viceversa.

Questa è la mia direttiva:

.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'); }); } }; }]); 

});

Vedo qui che getter e setter in binding sono ora supportati, ma non riesco a trovare da nessuna parte come usare getter e setter. C’è modo di farlo? Cioè: can ng-model-options sostituisce la mia direttiva convert?

Grazie

La documentazione potrebbe sembrare un po ‘sfocata, ma l’utilizzo è piuttosto semplice. Cosa devi fare:

  1. HTML:

      
  2. nel controller JS, invece del modello attuale, creare una funzione che restituirà il valore (+ applica stripping) se non è presente alcun parametro inviato e che aggiornerà il modello (+ applica altre modifiche) se viene inviato un parametro.

Il getter / setter è fondamentalmente un altro “livello” tra il valore della vista e il valore del modello.

Esempio:

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

DEMO PLUNKER: http://plnkr.co/edit/Zyzg6hLMLlOBdjeW4TO0?p=preview

(controlla console – http://screencast.com/t/3SlMyGnscl )

NOTA: Sarebbe interessante vedere come sarebbe questa scala in termini di riusabilità. Vorrei consigliare di creare questi getter / setter come metodi riutilizzabili esternalizzati e avere generatori per loro (perché il modello di dati è diverso per ciascun caso). E nei controllori chiamare solo quei generatori. Solo i miei 2 centesimi.

Questa domanda è piuttosto vecchia, ma per IE9 + (e ovviamente tutti gli altri browser rilevanti) è ansible utilizzare il metodo getter / setter ECMAScript 5 che preferirei contro l’opzione getterSetter di 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 

Questo esempio è tratto da http://javascriptplayground.com/blog/2013/12/es5-getters-setters/