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 for scope.$parent.teacher) instead of the string teacher.email.
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.