AngularJS : Differences among = & @ in directive scope?


Answers

Summary

  1. @attr binds to a matching DOM attribute's evaluated string value.
  2. =attr binds to a matching DOM attribute's scope property.
  3. &attr binds to a matching DOM attribute's scope function.
  4. @
  5. =
  6. &

We use the 4, 5, and 6 if the target DOM attribute's name matches the isolate scope proprty name. Here is a working fiddle of the following example.

Html

<div ng-app='isolate'>
     <h3>Outer Scope</h3>

    <input type="text" ng-model="myModel" />
    <p>msg: {{ msg }}</p>
     <h3>Inner Scope</h3>

    <div id="inner">
        <div my-directive at="{{ myModel }}" equals="myModel" ampersand="msg=msg+'click'"></div>
    </div>
</div>

Javascript

angular.module('isolate', [])
    .directive('myDirective', function () {
    return {
        template:
            '<label>@attr</label><input value="{{ myAt }}" />' +
            '<label>@</label><input value="{{ at }}" />' +
            '<label>=attr</label><input ng-model="myEquals" />' +
            '<label>=</label><input ng-model="equals" />' +
            '<label>&attr</label><input type="button" ng-click="myAmpersand()" value="Btn" />' +
            '<label>&</label><input type="button" ng-click="ampersand()" value="Btn" />',
        scope: {
            myAt: '@at',
            myEquals: '=equals',
            myAmpersand: '&ampersand',
            at: '@',
            equals: '=',
            ampersand: '&'
        }
    };
});
Question

This question already has an answer here:

Creating an isolate scope inside a directive lets us map the outer scope to the inner scope. We have seen six different ways to map to attrbutes:

  1. =attr
  2. &attr
  3. @attr
  4. =
  5. &
  6. @

What do each of these scope mapping options do?