Angular Scope Linking in Directives

scope-linking.md

What do the little symbols for scope linking mean?

Well, say you have controller.js and view.html with the following code:

Your controller.js

$scope.name = 'world';

Your view.html

<div a="name" b="{{name}}">

Now, you have two different directives:

1) directive.js

// boilerplate directive stuff
scope: {
  name: '@'
}
// more boilderplate directive stuff

What are the resulting values of a and b?

• '@' means copy the attr value.
  • "a" -> "name" (because that is what the value of the "a" attribute is)
  • "b" -> "world" (because it would be interpolated)

2) alt-directive.js

// boilerplate directive stuff
scope: {
  name: '='
}
// more boilerplate directive stuff

What are the resulting values of a and b?

• "=" means evaluate the expression
  • "a" -> "world" (we are treating "name" as expression and it is "world")
  • "b" -> ERROR. Because "{{name}}" is not a valid expression