javascript - Angularjs directive: Isolated scope and attrs

Question

Please see the example here

foodMeApp.directive('fmRating', function() {
  return {
    restrict: 'E',
    scope: {
      symbol: '@',
      max: '@',
      readonly: '@'
    },
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {

      attrs.max = scope.max = parseInt(scope.max || 5, 10);
...

Angular needs symbol , max, readonly to be defined in the isolated scope object to access it from parent scope.

it is used here

<fm-rating ng-model="$parent.restaurant.price" symbol="$" readonly="true"></fm-rating>

So, what is the purpose of attrs? Can't one access all the attributes passed through attrs. Why can't one access value of max as attrs.max instead of scope.max

Why assign back like attrs.max = scope.max ?

Since this app is written by Angular authors, I expect a reason.

thanks.

Answer 1

what is the purpose of attrs?

Attributes defined on the same element as your directive have a few purposes:

1. They are the only way to pass information into a directive that uses an isolate scope. Since the directive isolate scope doesn't prototypically inherit from the parent scope, we need a way to specify what we want to pass to the isolate scope. '@', '=', and '&' in the "object hash" therefore each require an attribute to specify what data/information is being passed.
2. They serve as an inter-directive communication mechanism. (E.g., Managing communication between independent AngularJS directives independently)
3. They normalize the attribute names.

Can't one access all the attributes passed through attrs?

Yes you can, but

1. you will not have any data binding.
   '@' sets up one-way "string" databinding (parent scope → directive isolate scope) With @ the value you see/get in the directive is always a string, so don't use this if you're trying to pass an object to your directive.
   '=' sets up two-way databinding (parent scope ↔ directive isolate scope).
   Without databinding, your directive can't $watch or $observe model/data changes automatically.
2. attribute values with {{}}s will cause you problems, since they will not be interpolated.
   Suppose we have <my-directive name="My name is {{name}}"> and the parent scope has $scope.name='Mark'. Then, inside the linking function, console.log(attrs.name) results in undefined.
   If name is an isolate scope property defined with '@', then attrs.$observe('name', function(val) { console.log(val) }) results in My name is Mark. (Note that inside the linking function, $observe() must be used to get the interpolated value.)

Why can't one access value of max as attrs.max instead of scope.max

answered above

Why assign back like attrs.max = scope.max ?

The only reason I can think of for doing this is in case some other directive needs to see this attribute/value (i.e., inter-directive communication). However, the other directive would need to run after this directive for this to work (which can be controlled somewhat with the priority directive setting).

Summary: in a directive with an isolate scope, normally you don't want to use attrs. (I suppose it could be a way to send initialization data/values into a directive -- i.e., if you don't need databinding for these values and you don't need interpolation.)