How do I evaluate attribute values in a directive?

14,540

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.

Share:
14,540

Related videos on Youtube

Daniel
Author by

Daniel

Updated on September 14, 2022

Comments

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

    • Ajay Beniwal
      Ajay Beniwal over 10 years
      just replace attrs.recipient with scope.recipient