ng-bind works as a directive of textarea but not input tag

Question

I am new to angularjs, and while i was exploring ng-bind, i noticed that it can be used as a directive of textarea ::

<input type="text" ng-model="review.start"/> 

<textarea ng-bind="review.start"> </textarea>

Thus the text i wrote in input tag was also reflected in the textarea field by data binding.

But ng-bind did not work with input tag.. I think ng-bind was not supposed to be used with user inputs. Angular docs are also not shedding much light on this.

So, was it made to work only with textarea in case of user inputs or something else?

Thanks,

Hmm. Looks like the [documentation](https://docs.angularjs.org/api/ng/directive/textarea) is wrong. "The data-binding and validation properties of this element are exactly the same as those of the input element." — Wayne Ellery, Jan 10 '15 at 10:25
please check the answer here on the difference between ngBind and ngModel http://stackoverflow.com/q/12419619/3109205 — teleaziz, Jan 10 '15 at 10:45
@teleaziz yes, i went through that post earlier, and it nowhere says to use ng-bind in textarea or input fields. So, i am confused . — Aakash, Jan 10 '15 at 11:13
Technically `ngBind` works on input elements too in the sense that the element's textContent is updated. It's just that the text you see in the input is its value, not its textContent. — tasseKATT, Jan 10 '15 at 11:28

score 3 · Accepted Answer · edited Mar 22 '20 at 18:55

3

Following is peace of code from ngBind directive from Angular.JS

scope.$watch(attr.ngBind, function ngBindWatchAction(value) {
    element.textContent = value === undefined ? '' : value;
});

As you can see, when it find change in attribute ngBind, it set element.textContent to changed value.

For input DOM textContent property does not set it's value. While with textarea DOM works with textContent property.

edited Mar 22 '20 at 18:55

Mario Boss

1,784
3
20
43

answered Jan 10 '15 at 11:25

dhavalcengg

4,678
1
17
25

Angular source code is actually the best documentation :) – sbedulin Jan 10 '15 at 11:38

score 2 · Answer 2 · answered Jan 10 '15 at 11:24

ngBind can work with any element whose contents can be replaced with text.

According to the Angular documentation:

The ngBind attribute tells Angular to replace the text content of the specified HTML element with the value of a given expression, and to update the text content when the value of that expression changes.

That includes:

<div>Text</div>
<textarea>Text</textarea>
<span>Text</span>
<h1>Text</h1>
etc...

It will not work with:

<input />
<select></select> (requires <option> as children)
<ul></ul> (requires <li> as children)
etc...

ng-bind works as a directive of textarea but not input tag

2 Answers2