what is the purpose of attrs?
Attributes defined on the same element as your directive have a few purposes:
- 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.
- They serve as an inter-directive communication mechanism. (E.g., Managing communication between independent AngularJS directives independently)
- They normalize the attribute names.
Can’t one access all the attributes passed through attrs?
Yes you can, but
- 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. - 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 inundefined
.
If name is an isolate scope property defined with ‘@’, thenattrs.$observe('name', function(val) { console.log(val) })
results inMy 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.)