How do I evaluate attribute values in a directive?
As @Ajay already mentioned in a comment, you can use scope.recipient
. This works because you created an isolate scope in your directive:
scope: {
recipient: "="
},
This creates a directive scope property named recipient
which is two-way databound to a parent scope property. Which parent property? The one defined by your attribute: recipient="teacher.email"
– hence parent scope property teacher.email
is bound to isolate scope property recipient
.
If your directive will not be altering the value of recipient
, you should probably use '@' instead of '='. '@' gives us "one-way strings":
scope: {
recipient: "@"
},
You'll need to alter your HTML though:
<sendemail recipient="{{teacher.email}}"></sendemail>
In the sendEmail() function, we can still use scope.recipient
, just like we did for '='.
If we use scope: true
instead, the directive will create a "normal" child scope, rather than an isolate scope. In the directive we would then use
scope.$eval(attrs.recipient)
to obtain the value. This works because of the way JavaScript prototypal inheritance works. $eval will look for property teacher.email
and not find it on the directive child scope. It then follows the prototype chain to the parent scope and finds it there.
Related videos on Youtube
Daniel
Updated on September 14, 2022Comments
-
Daniel about 1 year
Is there a good way to have AngularJS directives evaluate an attribute passed in as a parameter?
Here's a simplified example to show my problem (I recognize you could implement this behavior without a directive):
link: function postLink(scope, element, attrs) { debugger; // scope.$parent already knows the value of teacher here scope.sendEmail = function(){ alert(attrs.recipient); //window.open("mailto:" + attrs.recipient); } }
I would like the directive to use the value of
teacher.email
(note that the link function has the correct value forscope.$parent.teacher
) instead of the stringteacher.email
.-
Ajay Beniwal over 10 yearsjust replace attrs.recipient with scope.recipient
-