ngmodeloptions - AngularJS ng-model-options getter-setter

ngmodeloptions angular 4

Question

Acabo de actualizar a la versión angular 1.3.8.

Al usar la versión 1.2.23, he creado una directiva para convertir la vista del formulario de datos a modelo y viceversa.

Esta es mi directiva:

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

});

Veo here que ahora se admiten los captadores y definidores en el enlace, pero no puedo encontrar en ningún lugar cómo usar tanto los captadores como los definidores. ¿Hay alguna forma de hacerlo? Es decir, ¿pueden ng-model-options reemplazar mi directiva de conversión?

Gracias

Answer 1

Esta pregunta es bastante antigua, pero para IE9 + (y, por supuesto, para todos los demás navegadores relevantes) puede utilizar el método get / setter ECMAScript 5, que preferiría en contra de la opción 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

Este ejemplo es de http://javascriptplayground.com/blog/2013/12/es5-getters-setters/

Answer 2

La documentación puede parecer un poco confusa pero el uso es bastante simple. Qué necesitas hacer:

1. HTML:

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

2. en el controlador JS, en lugar del modelo real, cree una función que devolverá el valor (+ aplicar eliminación) si no se envía un parámetro y actualizará el modelo (+ aplicar otros cambios) si se envía un parámetro.

El captador / definidor es básicamente otra "capa" entre el valor de vista y el valor de modelo.

Ejemplo:

$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

(verifique la consola - http://screencast.com/t/3SlMyGnscl )

NOTA: Sería interesante ver cómo sería esta escala en términos de reutilización. Yo recomendaría crear estos captadores / definidores como métodos reutilizables externalizados y tener generadores para ellos (porque el modelo de datos es diferente para cada caso). Y en los controladores de solo llamar a esos generadores. Sólo mis 2 centavos.