Question

when declaring scopes for directives, I have come across the symbols ‘@’, ‘=’.

I’m curious when would be a case where ‘=’ bindings are perferred over ‘@’ and vice-versa.

Answer 1

From the official documentation, you can read :

1. @ or @attr – bind a local scope property to the value of DOM attribute. The result is always a string since DOM attributes are
   strings. If no attr name is specified then the attribute name is
   assumed to be the same as the local name. Given and widget definition of scope: { localName:’@myAttr’ },
   then widget scope property localName will reflect the interpolated
   value of hello {{name}}. As the name attribute changes so will the
   localName property on the widget scope. The name is read from the
   parent scope (not component scope).

2. = or =attr – set up bi-directional binding between a local scope property and the parent scope property of name defined via the value
   of the attr attribute. If no attr name is specified then the attribute
   name is assumed to be the same as the local name. Given and widget definition of scope: {
   localModel:’=myAttr’ }, then widget scope property localModel will
   reflect the value of parentModel on the parent scope. Any changes to
   parentModel will be reflected in localModel and any changes in
   localModel will reflect in parentModel.

So if you want a 2-way binding, you should use =…