ngValue one way binding?

[greenarr0w]

Hi.

I'm trying to use ng-value in an input box as a one way binding. But the thing is, when the model changes, the input box is not reflecting the new value. I'm debugging the ngValue directive and i can see that the watcher is triggered, under the hood the value is being set with setAttribute (using element.attr). That is setting the value of the attribute, but it is not changin the view.

I created this fiddler, and I see this strange behaviour. Just have a look at the value reflected in the view and the value in the console.debug. Is this normal behaviour? Can anyone explain this to me?

https://jsfiddle.net/upqeksf0/
This is in Chrome 46, I haven't checked other browsers.

[gkalpak]

It seems like you pasted the wrong fiddle. In the one you posted neither Angular nor ngValue are used.

In any case, this sounds like a general support question, so you should post it on one of the appropriate support channels.
_{GitHub issues are reserved for bug reports and feature requests.}

Thx !

[jscriptcoder]

Hi @gkalpak

I think you didn't understand the problem. Here is another jsfiddle using ng-value: https://jsfiddle.net/usd9wub2/1/

In that example, we have an inputbox and a span element, both having "value" data-bound. If you click on the button "Set new value", you'll see that we change the model, "value", and the view changes accordingly... Now, type something in the input box and click again in the button. The change is reflected in the span element but no longer in the inputbox.

What seems to happen is that once we type in, the property of the input object, (not the attribute of the element) is set, and the view will reflect this change. ng-value directive seems to be watching this model for changes, if there is any, it'll call setAttribute method instead of setting the property:

input.setAttribute('value', 'something'); // changes the attribute of the element (also the view in a pristine state)
input.value = 'something'; // changes the property (and always the view)

Shouldn't ng-value use "$element.prop(attrName, value)" instead of "$element.attr(attrName, value)" for input elements?

Thanks,
Fran

[gkalpak]

@jscriptcoder, indeed I misunderstood the problem. Thx for clarifying 👍
So, regarding the "correct" problem: As mentioned in the docs, ngValue is not a general purpose directive; it's specifically targeted to <option> and <input type="radio"> elements and it's purpose is to set elements attribute, so that the right value gets bound to the model when the user interacts with the controls.

As such, it's not suitable for one-way binding to an input's value property. @Narretz, might have something to say about it, since he is looking into refactoring ngValue into something more powerful, I think.

That said, it is trivial to create your own one-way-binding-to-value-property directive. Something like:

.directive('myOnewayValue', function() {
  return function(scope, elem, attrs) {
    scope.$watch(attrs.myOnewayValue, elem.val.bind(elem));
  };
})

Demo fiddle

[gkalpak]

OK, so I'm reopening this, so we can investigate ways to make ngValue more useful without breaking it's current functionality.

E.g. setting the value property (instead of attribute) seems to work as expected for <option> and <input type="radio"> in Chrome (didn't test on other browsers). So, it might be possible to make ngValue much more useful (e.g. for one-way binding on any input), with this little change (and without affecting its current functionality).

@greenarr0w or @jscriptcoder, if you fancy getting a shot at this, be our guests 😃

[Narretz]

ngValue was initially created so that you can bind radio inputs to non-string values. Later, it was expanded to be used with option elements (where non-string bindings don't work for other reasons). It was never intended for binding to other inputs, that's what ngModel was / is for. But we can look into what happens when we set the property, too. Might have some side-effects.

[jscriptcoder]

Thanks guys for the answer, and thanks @gkalpak for the demo... Even though I read the documentation about ng-value, I have to admit I was hoping the input[type="text"] to change, not only the "value" as attribute in the element, but also the content of the input. To me it feels like the expected behavior. But that's just my own feeling ;-).

I actually might give it a shot ;-)

Thanks,
Fran

[m-amr]

I have done a lot of debugging and i think that the problem is here
1 - after the $digest function call the watcher listener
2 - the listener call attr.$set('value', value);
3- then $set function call this.$$element.attr(attrName, value);
4 the attr function call element.setAttribute(name, value); (jqLite function)
and Here come the problem it is related to element.setAttribute i think this is not related to angular

if you open the browser and change the input value using this method

     element.setAttribute('value', 'newValue')

it will update the input value at the view, but if we change the input by the typing some keys.
and then use element.setAttribute('value', 'newValue')

it will not update the value.
but element.value = 'newValue' will do it.

so the problem is in element.setAttribute.
The value attribute vs value property
in case of value attribute acts as default value if property has no value,
but once the property value had a value, it will not read the value from attribute