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

manpreet Best Answer 2 years ago

I've read the AngularJS documentation on the topic carefully, and then fiddled around with a directive. Here's the fiddle.

And here are some relevant snippets:

• From the HTML:

   bi-title="title" title="{{title}}">{{text}}

• From the pane directive:

  scope: { biTitle: '=', title: '@', bar: '=' },

There are several things I don't get:

• Why do I have to use "{{title}}" with '@' and "title" with '='?
• Can I also access the parent scope directly, without decorating my element with an attribute?
• The documentation says "Often it's desirable to pass data from the isolated scope via an expression and to the parent scope", but that seems to work fine with bidirectional binding too. Why would the expression route be better?

manpreet 2 years ago

The = means bi-directional binding, so a reference to a variable to the parent scope. This means, when you change the variable in the directive, it will be changed in the parent scope as well.

@ means the variable will be copied (cloned) into the directive.

As far as I know, {{text}} should work too. bi-title will receive the parent scope variable value, which can be changed in the directive.

If you need to change several variables in the parent scope, you could execute a function on the parent scope from within the directive (or pass data via a service).