Angularjs directive: Isolated scope and attrs

Question

See an 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 requires symbol , max , readonly to define scope in an isolated object in order to access it from the parent scope.

used here

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

So what is the purpose of attrs ? Unable to access all attributes passed through attrs . Why is it impossible to get the max value as attrs.max instead of scope.max

Why assign back, for example attrs.max = scope.max ?

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

thank.

Answer 1

What is the purpose of attrs?

Attributes defined in the same element as your directive have several purposes:

• This is the only way to pass information to a directive that uses an isolation area. Since the scope of the directive is not prototypically inherited from the parent scope, we need a way to indicate what we want to pass to the isolation area. '@', '=' and '&' in the "hash object", so each of them requires an attribute to indicate which data / information is being transmitted.
• They serve as a mechanism for interstitial communication. (For example, Managing communication between independent AngularJS directives independently )
• They normalize attribute names.

Is it possible to access all the attributes passed through attrs?

Yes you can, but

• you will not have data binding.
  '@' sets up a one-way "string" data binding (parent area → variable selection area). With @, the value that you see / get in the directive is always a string, so do not use this if you are trying to pass an object to your directive.
  '=' sets the two-way data binding (parent authority field ).
  Without data binding, your directive cannot $ watch or $ watch model / data changes automatically.
• attribute values ​​with {{}} will cause problems because 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 binding function, console.log(attrs.name) leads to undefined .
  If the name is an isolation property defined using "@", then attrs.$observe('name', function(val) { console.log(val) }) results in My name is Mark . (Note that inside the bind function, the $ observ () function must be used to get the interpolated value.)

Why is it impossible to get the max value as attrs.max instead of scope.max

answered above

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

The only reason I can come up with this is if some other directive should see this attribute / value (i.e. interstitial communication). However, another directive must be run after this directive in order for it to work (which can be controlled somewhat using the priority directive).

Summary: in a directive with a scope, usually you do not want to use attrs . (I suppose this might be a way to send initialization data / values ​​to a directive - that is, if you don't need data binding for these values ​​and you don't need interpolation.)

Answer 2

Using attrs, you can access the attributes defined in your html tag, e.g.

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

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

Block:

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

analyze and assign the current value of scope.max or 5 , if it does not exist, to scope.max and attrs.max. Thus, after the job, you can read with attrs.max . Prior to this, the attrs.max property is undefined.

Checking the source fmRating.js I do not know why / where / this piece of code is used.