48

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.

bsr
  • 57,282
  • 86
  • 216
  • 316
  • 1
    Take a look here http://stackoverflow.com/questions/14050195/what-is-the-difference-between-and-in-directive-scope/14063373#14063373 – Liviu T. Jan 13 '13 at 10:12

2 Answers2

96

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.)

Community
  • 1
  • 1
Mark Rajcok
  • 362,217
  • 114
  • 495
  • 492
  • 3
    thank you for the detailed answer. I applaud your effort, and especially enjoyed your article https://github.com/angular/angular.js/wiki/The-Nuances-of-Scope-Prototypal-Inheritance . Great work. – bsr Jan 14 '13 at 19:14
4

Using attrs you are able to access the attributes defined in your html tag like 

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

So in this case you will have access to the symbol and readonly attributes. Every attribute you define in your custom directive will be available to the attrs variable.

The block: 

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

Will parse and assign the current scope.max value or 5, if non existent, to the scope.max and attrs.max. This way, after the assignment you can read from attrs.max. Before that the attrs.max property in undefined.

Inspecting the fmRating.js source i don't know why/where/when this piece of code is being used.

Ivo
  • 113
  • 2
  • 7