Angularjs 1.3+ One- vs Double Way Data Binding

Question

I'm new to Angular and it is not clear where the double data binding is needed except from the classic ng-model scenario where the model value is reflected in the view.

Do I need double binding for ng-repeat variables for example? Or do I need it for variables that can be changed in $watch?

I read that one-way data binding can have significant performance improvements so I do not want to use double data binding unless I really need it

For example

 <img ng-src="{{mySrc}}"> or
 <img ng-src="{{::mySrc}}">

 <div ng-repeat="item in items"> or
<div ng-repeat="::item in ::items"> where items retrieved from $http

Can you be more specific about your case? Are you writing a custom directive that uses ng-repeat? — risto
– risto, Commented Feb 6, 2015 at 12:12

Simon Staton · Accepted Answer · 2015-02-06 12:40:07Z

3

2-way data binding refers directly to the ng-model directive, it's meaning is that you can change a model value in the view (via an input ng-model) and also change it programmaticly, either change will be replicated to the other and in the view.

ng-repeat is simply an expression that gets evaluated when a digest cycle starts so this is not 2-way data binding.

In terms of performance angulars binding process uses dirty checking and is not ideal, using an ng-model or not will make no difference to this. The digest cycle will only start if the model value changes or if you change a model value in angulars context.

After seeing the code snippet you provided the {{::model}} notation will simply create a one time binding, this means that the value will never change in your view and it won't be watched.

The different is {{value}} gets watched, when it changes this binding gets updated, this is slow on performance due to dirty checking however in your example the value is not watched, it's never checked and if used in a conditional statement is only evaluated once.

It's up to you if you want to use either, if a value will never change then use {{::}} as it's fast, if the values going to change in the future use {{}}

edited Feb 6, 2015 at 12:40

answered Feb 6, 2015 at 12:12

Simon Staton

4,5054 gold badges32 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

cksrc Over a year ago

So does this mean that double data binding only makes sense if I want to update the view when the ng-model value is changed? In all other cases I should use the '::' notation ? Can you commend on the examples I've added?

Simon Staton Over a year ago

Have just seen your edit, I think you are referring to one time bindings, this is different to single/2-way binding as the value is not changing and is just static, I will update my answer

cksrc Over a year ago

Thank you Simon, so just to make it clear. One-way data binding should be used only for variables like app settings or text that cannot be changed after the page load

a better oliver Over a year ago

2-way data binding refers directly to the ng-model directive, - Not really. It's just one example of two-way data binding.

a better oliver Over a year ago

this means that the value will never change in your view and it won't be watched - Not accurate either. The value will be watched until it's no longer undefined. Until then you can change it. So if you have an object, where one property has the value undefined, then you will have one watcher, even if the object is "static".

Harsh · Accepted Answer · 2015-02-06 12:28:31Z

0

Using double binding is useful only if your model is subjected to constant changes. In case your model is going to be a constant and doesn't need frequent changes than single binding would be effective. If you use too many double bindings even where it is not necessary it could lead to serious overhead in AngularJS and can bog down your site. That is because each double binding is monitored via watch by angular.

answered Feb 6, 2015 at 12:28

Harsh

1,7051 gold badge10 silver badges16 bronze badges

Collectives™ on Stack Overflow

Angularjs 1.3+ One- vs Double Way Data Binding

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related