AngularJS data binding types

Question

I know this is an old and 100 times-answered question, but things are getting more complex with the latest releases, thus causing me a lot of confusion. I'd like to know what is the difference between the four currently available ways to declare a data binding for an attribute in a directive. Specifically:

• @ Text binding
• = Two-way binding
• & Method binding (although some call it one-way binding)
• < One-way binding

I'm interested in particular in the difference between the last two, given that they seem to have overlapping functionalities and I really can't tell the difference and the advantages of one against the other.

Solution 1

Here is some information on the new one-way binding for isolate scope.

From GitHub:¹

feat($compile):

add one-way binding to the isolate scope definition This change allows the developer to bind an isolate scope / controller property to an expression, using a < binding, in such a way that if the value of the expression changes, the scope/controller property is updated but not the converse.

The binding is implemented as a single simple watch, which can also provide performance benefits over two way bindings.

• Closes #13928
• Closes #13854
• Closes #12835
• Closes #13900

Solution 2

@ Text binding:

This is used if we want to provide any static text to each instance of our directive. For e.g., any title or specific style/property component that needs to be passed to custom directive that is used to create a dialog.

= Two-way binding:

This is our normal angular two way data binding. For e.g., any live data update in a dialog or any user input (checkbox, radio etc.) can be achieved using this.

& Method binding:

As the name suggests this is primarily used for calling methods defined in the parent controller from the directive. It can also be used to evaluate a expression and bind the result to the directives scope. Typical usage might be responding to user events like when the user closes the dialog.

< One-way binding:

This I guess was introduced for higher performance situations, where we need not any updates from the directives scope to reflect on the parents scope. Typical usage scenario may be when we need to pass title, style, dialog configuration (modal/non modal, etc.) via a variable defined in the parent scope. Since such data are mostly not changed in the scope of the custom directive (our case dialog), one way binding would have a higher performance than a double binding. This is because angular watch cycle needs to monitor only the parents scope variables and not the directives one-way binded variables.

Note: I am not a expert in AngularJS and the answers above are best to my knowledge. They might be wrong in the view of a experienced Angular guy. Please pardon and correct me if there are any mistakes.

Official docs: https://docs.angularjs.org/api/ng/service/$compile#-scope-

Comments

[Rob]

I can never find this in the Angular documentation. Does anyone have a link to that?

[Keerthi Kumar P]

The above answer was completely from my understanding. Not sure if these differences are outlined in a single page of the angular docs :)

[mik01aj]

I just added a link to the official docs, see above. And yes, it is really hard to find.

[ruffin]

Man, I could use a plunker on this one.