How do I evaluate attribute values in a directive?

angularjs, angularjs-scope

Solution

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.

Problem

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

Original source