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?
angular-ngmodelangularjsng-bind
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?
AngularJS remembers the value and compares it to a previous value. This is basic dirty-checking. If there is a change in value, then it fires the change event.
The $apply()
method, which is what you call when you are transitioning from a non-AngularJS world into an AngularJS world, calls $digest()
. A digest is just plain old dirty-checking. It works on all browsers and is totally predictable.
To contrast dirty-checking (AngularJS) vs change listeners (KnockoutJS and Backbone.js): While dirty-checking may seem simple, and even inefficient (I will address that later), it turns out that it is semantically correct all the time, while change listeners have lots of weird corner cases and need things like dependency tracking to make it more semantically correct. KnockoutJS dependency tracking is a clever feature for a problem which AngularJS does not have.
So it may seem that we are slow, since dirty-checking is inefficient. This is where we need to look at real numbers rather than just have theoretical arguments, but first let's define some constraints.
Humans are:
Slow — Anything faster than 50 ms is imperceptible to humans and thus can be considered as "instant".
Limited — You can't really show more than about 2000 pieces of information to a human on a single page. Anything more than that is really bad UI, and humans can't process this anyway.
So the real question is this: How many comparisons can you do on a browser in 50 ms? This is a hard question to answer as many factors come into play, but here is a test case: http://jsperf.com/angularjs-digest/6 which creates 10,000 watchers. On a modern browser this takes just under 6 ms. On Internet Explorer 8 it takes about 40 ms. As you can see, this is not an issue even on slow browsers these days. There is a caveat: The comparisons need to be simple to fit into the time limit... Unfortunately it is way too easy to add a slow comparison into AngularJS, so it is easy to build slow applications when you don't know what you are doing. But we hope to have an answer by providing an instrumentation module, which would show you which are the slow comparisons.
It turns out that video games and GPUs use the dirty-checking approach, specifically because it is consistent. As long as they get over the monitor refresh rate (typically 50-60 Hz, or every 16.6-20 ms), any performance over that is a waste, so you're better off drawing more stuff, than getting FPS higher.
Why do I have to use "{{title}}" with '@' and "title" with '='?
@ binds a local/directive scope property to the evaluated value of the DOM attribute. If you use title=title1
or title="title1"
, the value of DOM attribute "title" is simply the string title1
. If you use title="{{title}}"
, the value of the DOM attribute "title" is the interpolated value of {{title}}
, hence the string will be whatever parent scope property "title" is currently set to. Since attribute values are always strings, you will always end up with a string value for this property in the directive's scope when using @.
= binds a local/directive scope property to a parent scope property. So with =, you use the parent model/scope property name as the value of the DOM attribute. You can't use {{}}
s with =.
With @, you can do things like title="{{title}} and then some"
-- {{title}} is interpolated, then the string "and them some" is concatenated with it. The final concatenated string is what the local/directive scope property gets. (You can't do this with =, only @.)
With @, you will need to use attr.$observe('title', function(value) { ... })
if you need to use the value in your link(ing) function. E.g., if(scope.title == "...")
won't work like you expect. Note that this means you can only access this attribute asynchronously.
You don't need to use $observe() if you are only using the value in a template. E.g., template: '<div>{{title}}</div>'
.
With =, you don't need to use $observe.
Can I also access the parent scope directly, without decorating my element with an attribute?
Yes, but only if you don't use an isolate scope. Remove this line from your directive
scope: { ... }
and then your directive will not create a new scope. It will use the parent scope. You can then access all of the parent scope properties directly.
The documentation says "Often it's desirable to pass data from the isolated scope via an expression and to the parent scope", but that seems to work fine with bidirectional binding too. Why would the expression route be better?
Yes, bidirectional binding allows the local/directive scope and the parent scope to share data. "Expression binding" allows the directive to call an expression (or function) defined by a DOM attribute -- and you can also pass data as arguments to the expression or function. So, if you don't need to share data with the parent -- you just want to call a function defined in the parent scope -- you can use the & syntax.
See also
Best Answer
ng-bind has one-way data binding ($scope --> view). It has a shortcut
{{ val }}
which displays the scope value$scope.val
inserted into html whereval
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"/>
.