How do I evaluate attribute values in a directive?

Question

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.

just replace attrs.recipient with scope.recipient

Ajay Singh Beniwal
– Ajay Singh Beniwal

2013-03-19 18:26:43 +00:00
Commented Mar 19, 2013 at 18:26 — Ajay Singh Beniwal
– Ajay Singh Beniwal, Commented Mar 19, 2013 at 18:26

Mark Rajcok · Accepted Answer · 2013-03-19 19:01:18Z

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.

Collectives™ on Stack Overflow

How do I evaluate attribute values in a directive?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related