2013-03-19 13 views
14

C'è un buon modo per avere le direttive AngularJS per valutare un attributo passato come parametro?Come si valutano i valori degli attributi in una direttiva?

Ecco un simplified example per mostrare il mio problema (riconosco si potrebbe implementare questo comportamento, senza una direttiva):

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); 
     } 
    } 

vorrei che la direttiva di usare il valore di teacher.email (si noti che la funzione di collegamento ha il valore corretto per scope.$parent.teacher) invece della stringa teacher.email.

+1

basta sostituire attrs.recipient con scope.recipient –

risposta

22

Come @Ajay già menzionato in un commento, è possibile utilizzare scope.recipient. Questo funziona perché si è creato un ambito isolato nella vostra direttiva:

scope: {  
    recipient: "=" 
}, 

Questo crea una proprietà ambito direttiva denominata recipient che è a due vie databound a una proprietà ambito genitore. Quale proprietà genitore? Quella definita dal tuo attributo: recipient="teacher.email" – pertanto la proprietà dell'ambito genitore teacher.email è associata all'isolamento della proprietà dell'ambito recipient.

Se la direttiva non modifica il valore di recipient, è consigliabile utilizzare "@" anziché "=". '@' Ci dà "stringhe di sola andata":

scope: {  
    recipient: "@" 
}, 

Avrete bisogno di modificare il codice HTML però:

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

Nella funzione sendEmail(), possiamo ancora usare scope.recipient, basta come abbiamo fatto per '='.


Se usiamo scope: true invece, la direttiva creerà un "normale" scope bambino, piuttosto che un ambito isolato. Nella direttiva utilizzeremmo quindi

scope.$eval(attrs.recipient) 

per ottenere il valore. Questo funziona a causa del modo in cui funziona l'ereditarietà prototipale JavaScript. $ eval cercherà la proprietà teacher.email e non la troverà sull'ambito figlio della direttiva. Quindi segue la catena del prototipo fino all'ambito principale e lo trova lì.

Problemi correlati