Comment évaluer les valeurs des attributs dans une directive ?

Question

Existe-t-il un bon moyen pour que les directives AngularJS évaluent un attribut passé en paramètre ?

Voici une exemple simplifié pour montrer mon problème (je reconnais qu'il est possible d'implémenter ce comportement sans 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);
      }
    }

Je voudrais que la directive utilise la valeur de teacher.email (il est à noter que la fonction de lien a la valeur correcte pour scope.$parent.teacher ) au lieu de la chaîne teacher.email .

Answer 1

Comme @Ajay l'a déjà mentionné dans un commentaire, vous pouvez utiliser scope.recipient . Cela fonctionne parce que vous avez créé un champ d'application isolate dans votre directive :

scope: {    
   recipient: "="
},

Cela crée une propriété de portée de directive nommée recipient qui est liée à une propriété de la portée parentale dans les deux sens. Quelle propriété parentale ? Celle définie par votre attribut : recipient="teacher.email" - d'où la propriété du champ d'application parent teacher.email est lié pour isoler la propriété du champ d'application recipient .

Si votre directive ne modifie pas la valeur de recipient vous devriez probablement utiliser '@' au lieu de '='. '@' nous donne des "chaînes à sens unique" :

scope: {    
   recipient: "@"
},

Vous devrez cependant modifier votre code HTML :

<sendemail recipient="{{teacher.email}}"></sendemail>

Dans la fonction sendEmail(), nous pouvons encore utiliser scope.recipient comme nous l'avons fait pour '='.

---

Si nous utilisons scope: true au lieu de cela, la directive créera un champ d'application enfant "normal", plutôt qu'un champ d'application isolé. Dans la directive, nous utiliserions alors

scope.$eval(attrs.recipient)

pour obtenir la valeur. Cela fonctionne grâce à la manière dont l'héritage prototypique JavaScript fonctionne. $eval recherchera la propriété teacher.email et ne le trouve pas dans le champ d'application de la directive enfant. Il suit alors la chaîne de prototypes jusqu'au champ d'application parent et le trouve à cet endroit.