2013-08-28 11 views
9

Se utilizzo un ambito isolato, posso passare una variabile su un attributo.Angularjs che passa le variabili a una direttiva con un ambito ereditato (non isolato)

cioè

<my-directive baz='foo.bar'> 

Poi, della direttiva Javascript

.directive('myDirective', function() { 
    return { 
    scope: { 
     'baz': '=' 
    } 
    } 
}); 

Esiste un modo per fare qualcosa di simile con un campo di applicazione ereditaria? La funzione di collegamento passa semplicemente le stringhe.

In questo momento sto analizzando personalmente la variabile e confrontandola con l'ambito. $ Parent. Sembra che ci dovrebbe essere una funzione di supporto o un modo più semplice per farlo.

+0

Intendi l'accesso all'ambito genitore dal codice della direttiva? –

risposta

14

Usa $eval o $parse:

<my-directive baz='foo.bar'> 

.directive('myDirective', function($parse) { 
    return { 
    scope: true, 
    link: function(scope, element, attrs) { 
     console.log(scope.$eval(attrs.baz)); 
     var model = $parse(attrs.baz); 
     console.log(model(scope)); 
     // if you want to modify the value, use the model, not $eval: 
     model.assign(scope, "new value"); 
    } 
    } 
}); 
+0

Non sapevo di $ parse. Questo è un bel modo per farlo. – BoxerBucks

0

Se non si dichiara l'oggetto campo di applicazione della direttiva, non vi sarà alcuna installazione ambito isolato e si otterrà l'accesso al ambito che viene passato da dove viene dichiarato il div nel DOM.

Qualcosa di simile a questo:

.directive('myDirective', function() { 
    return { 
    function(scope, element, attrs){ 
     //scope here = the inherited scope from the DOM 
    } 
} 

Quindi, se avete il vostro direttiva dichiarato nel tag DIV, non è necessario inviare in realtà il valore come attributo - si può solo tirare fuori dal scopo.

3

con questo codice:

link: function(scope, elem, attrs) {} 

è possibile utilizzare

attrs 

elemento per ottenere tutti atributes assegnano a questa direttiva.

quindi è possibile assegnare facilmente attrs a qualsiasi ambito e utilizzarlo nel proprio e.x templae.

scope.someValue = attrs.attrName; 

Per riassumere:

direttiva:

link: function(scope, elem, attrs) { 
     scope.someValue = attrs.attrName; 
    } 

modello direttiva:

<div> {{someValue}} <div> 

direttiva chiamata

<my-directive attrName="foo"> </my-directive> 
+0

funziona solo con stringhe e forse bool ecc., Non oggetti, che probabilmente saranno problematici. – Millenjo

Problemi correlati