2014-12-30 20 views
11

sto imparando direttiva AngularJS, e una cosa che voglio fare è quello di passare qualche variabile $scope.message nel genitore scope (un scope di un controller), e voglio che sia rinominato param all'interno dello directivealert. Posso fare questo con un ambito isolato:Passo variabile per AngularJS direttiva senza scopo isolato

<div alert param="message"></div> 

e definire

.directive("alert", function(){ 
    return{ 
     restrict: "A", 
     scope: { 
      param: "=" 
     }, 
     link: function(scope){ 
      console.log(scope.param) # log the message correctly 
     } 
    } 
}) 

Ma posso fare questo senza usare ambito isolato? Supponiamo che io voglio aggiungere un altro directivetoast al <div toast alert></div> e utilizzare lo stesso param (mantenendo il 2 vie di associazione dati), ingenuamente mi farà

.directive("toast", function(){ 
    return{ 
     restrict: "A", 
     scope: { 
      param: "=" 
     }, 
     link: function(scope){ 
      console.log(scope.param) 
     } 
    } 
}) 

Io sicuramente metterò un errore Multiple directives [alert, toast] asking for new/isolated scope on:<div...

Così in generale, la mia domanda è: come rinominare la variabile dell'ambito principale senza un ambito isolato e come condividere le variabili quando due directives vengono posizionate su un singolo DOM?

+0

Vuoi 2 direttive per associare alla stessa proprietà padre '$ scope'? –

risposta

13

Modificare la direttiva brindisi:

.directive("toast", function(){ 
    return{ 
     restrict: "A", 
     link: function(scope, elem, attrs){ 
      var param = scope.$eval(attrs.param); 
      console.log(param) 
     } 
    } 
}) 

Example fiddle.

Poiché toast è ora nello stesso ambito di quello che avrebbe dovuto essere il genitore (se fosse consentito essere un ambito isolato), è possibile chiamare $ eval su scope con l'attributo param per ottenere il valore.

+0

Grazie, funziona perfettamente! Dovrei quindi dare un'occhiata ai documenti '$ eval()'. – Lelouch

+0

il $ eval() restituisce il valore o fornisce effettivamente l'associazione dati? Sembra che restituisca solo il valore, ma voglio essere sicuro. – Lelouch

+1

È solo il valore. Se hai bisogno di simulare i binding, potresti usare un $ watch ... Credo che questo possa essere eccessivo, anche se devi solo tornare a $ eval per ottenere il valore più recente (ad esempio su ngEvent). – Patrick

Problemi correlati