59

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.

Improve this question
2
  • I have never seen the < , in the list... Commented Mar 7, 2016 at 23:06
  • 3
    Great question. The link to the documentation with the new binding type, <, is docs.angularjs.org/api/ng/service/$compile#-scope- Commented Mar 7, 2016 at 23:31

2 Answers 2

Reset to default
90

@ 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-

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

4 Comments

I can never find this in the Angular documentation. Does anyone have a link to that?
The above answer was completely from my understanding. Not sure if these differences are outlined in a single page of the angular docs :)
I just added a link to the official docs, see above. And yes, it is really hard to find.
Man, I could use a plunker on this one.
6

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

From GitHub:1

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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.