AngularJS ng-model-option getter-setter

Question

Właśnie dokonałem aktualizacji do wersji kątowej 1.3.8.

Podczas korzystania z wersji 1.2.23 utworzyłem dyrektywę, aby przekonwertować widok formularza danych na model i vice werset.

To mój dyrektywy:

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

});

widzę here że pobierające i ustawiające w wiążących są teraz obsługiwane, ale nie mogę znaleźć nigdzie jak używać zarówno pobierające i ustawiające. Czy jest jakiś sposób to zrobić? To znaczy - czy ng-model-options może zastąpić moją dyrektywę convert?

Dzięki

Answer 1

Dokumentacja może wydawać się nieco rozmyty, ale użycie jest bardzo proste. Co trzeba zrobić:

1. HTML:

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

2. kontroler JS, zamiast rzeczywistego modelu, należy utworzyć funkcję, która zwróci wartość (+ stosować stripping), jeżeli nie wysłano żadnego parametru, który zaktualizuje model (+ zastosuje inne zmiany), jeśli parametr zostanie wysłany.

Pozyskiwanie/ustawianie to w zasadzie kolejna "warstwa" między wartością widoku a wartością modelu.

Przykład:

$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

(sprawdź konsolę - http://screencast.com/t/3SlMyGnscl)

UWAGA: Byłoby interesujące zobaczyć, jak będzie to skala w zakresie ponownego wykorzystania. Radziłabym stworzyć te programy pobierające/ustawiające jako eksternalizowane metody wielokrotnego użytku i generatory dla nich (ponieważ model danych jest inny dla każdego przypadku). A w kontrolerach tylko wywoływać te generatory. Tylko moje 2 centy.

Answer 2

To pytanie jest dość stary - ale dla IE9 + (i oczywiście wszystkich innych odpowiednich przeglądarek) można skorzystać z ECMAScript 5 getter/setter methode których wolałbym przed opcją getterSetter NG-modelu

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 

Ten przykład jest z http://javascriptplayground.com/blog/2013/12/es5-getters-setters/