There are a lot of great answers here, but I would like to offer my perspective on the differences between @, =, and & binding that proved useful for me.
All three bindings are ways of passing data from your parent scope to your directive’s isolated scope through the element’s attributes:
@ binding is for passing strings.
These strings support{{}}expressions for interpolated values.
For example:
. The interpolated expression is evaluated against
directive’s parent scope.= binding is for two-way model binding. The model in parent scope
is linked to the model in the directive’s isolated scope. Changes to
one model affects the other, and vice versa.& binding is for passing a method into your directive’s scope so that
it can be called within your directive. The method is pre-bound to
the directive’s parent scope, and supports arguments. For example if the method is hello(name) in parent scope, then in
order to execute the method from inside your directive, you must
call $scope.hello({name:’world’})
I find that it’s easier to remember these differences by referring to the scope bindings by a shorter description:
@Attribute string binding=Two-way model binding&Callback method binding
The symbols also make it clearer as to what the scope variable represents inside of your directive’s implementation:
@string=model&method
In order of usefulness (for me anyways):
- =
- @
- &