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.