How to implement ng model binding for this getter / setter script?

Question

I have an object that displays 2 properties (say foo and bar ) via getters / seters in the form of method([value]) , so you can get their value by calling method() , and you can set their value to the method(value)

In addition, this object supports synchronization of foo and bar , since its bar will always be 1 more than foo ). This means that whenever you set the value to foo , it internally updates the value of bar and vice versa.

This is an example implementation:

 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; } } } 

Now I have two input elements, one for each of these properties.

 // in my controller $scope.myobj = obj(); <!-- in the HTML --> <input my-directive ng-model="myobj.foo"> <input my-directive ng-model="myobj.bar"> 

Remember that foo and bar are functions, so I write $formatter to get the value by calling getter; and a $parser to set the value by calling the setter, for example:

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

You can check the example in jsFiddle or Plunker .

As you can see, the formatting / parser thing works fine, but the problem is that the <input> value of the property, which is internally modified (e.g. bar , if you changed foo ) is not updated .

I can’t even understand why it’s not working on earth. As you can see in the example, under each input, I interpolate the same value, which seems completely updated with any changes. Why doesn't the ng model update the <input> value?

Answer 1

This can be done like this:

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

(It looks like a hack, and I don't really like my decision.)

As @Brandon noted, you are looking at the getter function. The evaluation of a function can give different values, but the definition of a function never changes in your example, so the formatter never works in your directive.

In my example, I look at the evaluation of the getter function , so it fires whenever the internal value changes. I avoided using ngModel since it does not look appropriate.

in the template:

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

in the function of the directory link:

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

Answer 2

I could get the getter / setter script to work by encoding a different directive besides the ng model to determine the recipient and installer of the ng model binding. Cm:

fooobar.com/questions/492530 / ...

Using the ng-model-getter and ng-model-setter directives described in this question, you simply follow this path in your 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)">