Demystifying AngularJS 1.5 one-way data binding

Yes, it’s one-way binding. Don’t confuse it with once-time binding in Angular 1.3. One-way data binding is a new data binding mechanism for component and directive of AngularJS 1.5. In this article, I will try to demystify these things about one-way data binding:

• What is one-way data binding ?
• Do we have performance gain from it ?

I prefer to use the word 1-way data binding instead of one-way binding because it’s easier to read.

What is 1-way data binding ?

1-way data binding is the new binding mechanism for component and directive. We use 1-way data binding with < notation. Here is an example of 1-way data binding:

app.directive('nameEditor', function() {
	return {
		scope: {
			userInfo: '<',
			salary: '<'
		},
		templateUrl: 'nameEditor.html'
	}
});

From the name, we might assume that with 1-way data binding, changes from parent scope will be reflected to child scope but changes from child scope WON’T be reflected to parent scope.

But it doesn’t work like that. 1-way data binding simply copies value from parent to children scope.  So with object data type, because both of parent scope and child scope hold the same reference of the object so changes from child scope will still be reflected to parent scope.

For primitive values like number, string and boolean. Changes from child scope won’t be able to reflect to parent scope.

In this example, parent is the controller scope and children is an isolated scope directive. Try to make changes on both parent and children and see result by your self.

Here is the result:

When making changes for first name and last name, because these fields belongs to an object regardless it comes from parent or child scope, changes are always reflected.

But for the salary, only changes from parent are reflected to child scope. Changes from child scope are not reflected because type of salary is primitive.

Do we have performance gain from it ?

I has this question when using 1-way data binding, here is answer answer this question. When compare with 2-way data binding, the number of watchers still the same so we do NOT have any performance gain from this new data binding.

The only data binding that can boost performance is once-time data binding, but it’s different story.

Conclusion

The problem with 2-way data binding: it increases the complexity of our app, it also make our app harder to debug. Most of time we don’t need two-way binding so with the new 1-way data binding, AngularJS offers another solution for us. The downside is it’s only works well with primitive value.