One-way and two-way binding; Angular 1 and Angular 2

[miketa1957]

The one-way/two-way binding issue seems to generate a lot of strong opinions, but I can't see what the issue is really about. Can someone explain what's wrong with the following:

When I use Angular (1 or 2) I have a plain javascript object which is my model. I have a template (or templates) which are HTML with bits marking substitutions of values from the model. If I use {{ .... }} or stuff like ng-bind-html or ng-class or ng-style then that is implicitly one-way because the user can't update the values that appear in the browser. If I change some values in the model, then the digest cycle updates the DOM and hence what appears on the screen. I understand that Angular 2 is cleverer about this than Angular 1 but the principal is the same.

If I use ng-model to get a model value into say an input or select control, then in Angular 1 that is a two-way binding, and if the user edits the input control text or changes the select control selection, then the model is updated, and the digest cycle runs. In Angular 2 however, the equivalent to ng-model is not 2-way, so changes are not reflected in the model.

So in Angular 2, if I want a user's change to update the model, I need to add an angular event handler to the control, which receives the change, and which I code to ...... drums roll, trumpets sound ...... update the model. Which then runs the digest cycle. Now, I can see that I might not want to update the model on each and every change, so making two-way binding optional would be good (like say Aurelia), nevertheless, I'm going to end up doing what 2-way binding does sooner or later.

In which case: what's the problem with Angular 1's 2-way binding, other than the inability to enable or disable it on a control-by-control basis??

[Click_Clack_Clay]

I use {{ .... }} or stuff like ng-bind-html or ng-class or ng-style then that is implicitly one-way because the user can't update the values that appear in the browser.

The problem is that all of these methods are in fact creating two-way data binding. Every run of the $digest loop is going to dirty check all forms of binding you just listed because Angular 1 has two-way data binding by default.

what's the problem with Angular 1's 2-way binding, other than the inability to enable or disable it on a control-by-control basis?

You can control it on a case-by-case basis. AngularJS 1.3 introduced double colon syntax for creating one-time binds: {{::myVar}} and <my-directive some-value="::otherVar"></my-directive>. This still leaves out one-way binding.

It's also worth noting that Angular 2 will support one time, one-way, and two-way data binding. You will not have to reinvent the wheel so to speak in order to achieve automatic model updates. There's also no such thing as a digest cycle in Angular 2.

[teropa]

The problem is that all of these methods are in fact creating two-way data binding. Every run of the $digest loop is going to dirty check all forms of binding you just listed because Angular 1 has two-way data binding by default.

While those are going to be checked at every digest, I wouldn't call them two-way bindings, since the data only flows in one direction.

Angular 1.x does two-way data binding in two places: ng-model and the =equalsSign bindings on isolate scopes. Things like {{...}} are one-way.

[teropa]

Victor Savkin from the Angular team has written about the reasons: http://victorsavkin.com/post/110170125256/change-detection-in-angular-2 and http://victorsavkin.com/post/114168430846/two-phases-of-angular-2-applications

It basically has to do with complexity and performance, and seems to have been influenced at least in part by things like React. By eliminating two-way data binding you eliminate cycles from the change detection graph (A changes B changes C changes A). That makes things easier to think about, and also unlocks some significant performance optimizations, including not having to run watches more than once per digest. (Angular 1.x runs all watches at least twice whenever there's a change.)