AngularJS ng-model-options getter-setter

Question

Ho appena aggiornato alla versione angolare 1.3.8.

Quando si utilizza 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 here che getter e setter nel legame sono ora supportati, ma non riesco a trovare da nessuna parte come utilizzare entrambi i getter e setter. C'è modo di farlo? Cioè: can ng-model-options sostituisce la mia direttiva convert?

Grazie

Answer 1

La documentazione potrebbe sembrare un po 'sfocata, ma l'utilizzo è abbastanza semplice. che cosa dovete fare:

1. HTML:

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

2. controller JS, al posto del modello reale, creare una funzione che restituirà il valore (+ applicare strippaggio) se il non è stato inviato alcun parametro e questo 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

(controllare 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.

Answer 2

Questa domanda è un po 'vecchia - ma per IE9 + (naturalmente tutti gli altri browser e rilevanti) è possibile utilizzare l'ECMAScript 5 getter/setter Methode che io preferirei contro la possibilità getterSetter di ng-modello:

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 da http://javascriptplayground.com/blog/2013/12/es5-getters-setters/