I'm currently learning AngularJS and am having difficulty understanding the difference between ng-bind
and ng-model
.
Can anyone tell me how they differ and when one should be used over the other?
Tosh wrote:
ng-bind has one-way data binding ($scope --> view). It has a shortcut {{ val }}
which displays the scope value $scope.val
inserted into html where val
is a variable name.
ng-model is intended to be put inside of form elements and has two-way data binding ($scope --> view and view --> $scope) e.g. <input ng-model="val"/>
.
Gil Birman wrote:
tosh's answer gets to the heart of the question nicely. Here's some additional information....
ng-bind
and ng-model
both have the concept of transforming data before outputting it for the user. To that end, ng-bind
uses filters, while ng-model
uses formatters.
With ng-bind
, you can use a filter to transform your data. For example,
<div ng-bind="mystring | uppercase"></div>
,
or more simply:
<div>{{mystring | uppercase}}</div>
Note that uppercase
is a built-in angular filter, although you can also build your own filter.
To create an ng-model formatter, you create a directive that does require: 'ngModel'
, which allows that directive to gain access to ngModel's controller
. For example:
app.directive('myModelFormatter', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, controller) {
controller.$formatters.push(function(value) {
return value.toUpperCase();
});
}
}
}
Then in your partial:
<input ngModel="mystring" my-model-formatter />
This is essentially the ng-model
equivalent of what the uppercase
filter is doing in the ng-bind
example above.
Now, what if you plan to allow the user to change the value of mystring
? ng-bind
only has one way binding, from model-->view. However, ng-model
can bind from view-->model which means that you may allow the user to change the model's data, and using a parser you can format the user's data in a streamlined manner. Here's what that looks like:
app.directive('myModelFormatter', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, controller) {
controller.$parsers.push(function(value) {
return value.toLowerCase();
});
}
}
}
Play with a live plunker of the ng-model
formatter/parser examples
ng-model
also has built-in validation. Simply modify your $parsers
or $formatters
function to call ngModel's controller.$setValidity(validationErrorKey, isValid)
function.
Angular 1.3 has a new $validators array which you can use for validation instead of $parsers
or $formatters
.
Mistalis wrote:
If you are hesitating between using ng-bind
or ng-model
, try to answer these questions:
Do you only need to display data?
Yes: ng-bind
(one-way binding)
No: ng-model
(two-way binding)
Do you need to bind text content (and not value)?
Yes: ng-bind
No: ng-model
(you should not use ng-bind where value is required)
Is your tag a HTML
<input>
?
Yes: ng-model
(you cannot use ng-bind with <input>
tag)
No: ng-bind
pejman wrote:
ngModel usually use for input tags for bind a variable that we can change variable from controller and html page but ngBind use for display a variable in html page and we can change variable just from controller and html just show variable.