javascript - ngmodelctrl - ¿Cómo implementar el enlace de ng-model en este escenario getter/setter?

input angularjs

Question

Tengo un objeto que expone 2 propiedades (digamos foo y bar ) a través de getters / setters en forma de method([value]) , por lo que puede obtener su valor llamando al method() y puede establecer su valor mediante el method(value) llamada method(value)

Además, este objeto mantiene foo y bar sincronizados, en la forma en que hace que bar siempre sea 1 mayor que foo ). Esto significa que cada vez que configura el valor de foo , internamente actualiza el valor de la bar , y viceversa.

Esta es la implementación de muestra:

function obj() {
    var foo = 1;
    var bar = 2;

    return {
        foo: function (value) {
            if (value) {
                foo = value;
                bar = foo + 1;
            }
            return foo;
        },
        bar: function (value) {
            if (value) {
                bar = value;
                foo = bar - 1;
            }
            return bar;
        }
    }    
}

Ahora tengo dos elementos de input , uno para cada una de estas propiedades.

// in my controller
$scope.myobj = obj();

<!-- in the HTML -->
<input my-directive ng-model="myobj.foo">
<input my-directive ng-model="myobj.bar">

Por favor, recuerde que foo y bar son funciones, entonces escribo un $formatter para obtener el valor llamando al getter; y un $parser para establecer el valor llamando al setter, así:

.directive(''myDirective'', function () {
    return {
        require: ''ngModel'',
        link: function ($scope, $element, $attrs, ngModel) {
            ngModel.$formatters.push(function (modelValue) {
               return modelValue(); 
            });

            ngModel.$parsers.push(function (viewValue) {
               ngModel.$modelValue(viewValue);
               return ngModel.$modelValue;
            });
        }
    };
});

Puede verificar el ejemplo en jsFiddle o Plunker .

Como puede ver, la cosa formateador / analizador funciona bien, pero el problema es que el valor de <input> de la propiedad que se modifica internamente (por ejemplo, bar si cambió foo ) no se actualiza .

Ni siquiera puedo entender por qué en la tierra no está funcionando. Como puede ver en el ejemplo, debajo de cada entrada estoy interpolando el mismo valor que parece estar perfectamente actualizado en cualquier cambio. ¿Por qué ng-model no está actualizando mi valor de <input> ?

Answer 1

Esta es una manera en que podrías hacerlo:

http://plnkr.co/edit/7HCpSb?p=preview

(Parece un poco hacky y no me gusta mucho mi solución).

Como señaló @Brandon, estás viendo la función getter. La evaluación de la función puede dar valores diferentes, pero la definición de la función nunca cambia en su ejemplo, por lo que el formateador nunca se dispara en su directiva.

En mi ejemplo, estoy viendo la evaluation of the getter function , por lo que se dispara cada vez que cambia el valor interno. Evité usar ngModel ya que no parece estar bien de esta manera.

en la plantilla:

<input my-directive accessor="myobj.foo">

en la función de enlace de directiva:

$scope.$watch( $attrs.accessor + ''()'', function( v ) {
  if ( v ) $element[0].value = v;
});

Answer 2

Pude obtener un escenario getter / setter para trabajar codificando otra directiva además de ng-model para especificar el getter y el setter de un enlace ng-model. Ver:

https://.com/a/21290588/738808

Usando las directivas ng-model-getter y ng-model-setter descritas en esta pregunta, simplemente proceda de esta manera en su html:

<input my-directive ng-model="$foo" ng-model-getter="myobj.foo()" ng-model-setter="myobj.foo($value)">
<input my-directive ng-model="$bar" ng-model-getter="myobj.bar()" ng-model-setter="myobj.bar($value)">