What is the difference between ‘@’ and ‘=’ in directive scope in AngularJS?

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:

  1. @ binding is for passing strings.
    These strings support {{}} expressions for interpolated values.
    For example:
    . The interpolated expression is evaluated against
    directive’s parent scope.

  2. = 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.

  3. & 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):

  1. =
  2. @
  3. &

Leave a Comment