What is the difference between '@' and '=' in directive scope in AngularJS?
01:20 27 Dec 2012

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:

    {{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 expression and to the parent scope", but that seems to work fine with bidirectional binding too. Why would the expression route be better?

I found another fiddle that shows the expression solution too: http://jsfiddle.net/maxisam/QrCXh/

angularjs angularjs-directive angularjs-scope isolated-scope