2013-05-23 18 views
16

Come ottenere l'elemento body nella direttiva angolare? il mio obiettivo è fare ciò che si fa con jquery $('body').innerWidth(); all'interno della direttiva. Non voglio usare l'implementazione jqlite integrata jQuery ma angolare.Angularjs - get body element all'interno della direttiva

+0

volevo ottenere l'accesso al tag body per modificare la classe - ma angolare ha attacchi che dovrebbero essere usati - è solo che per me l'ambito non è presente nella mia direttiva sepolta (una casella modale) questa modale ha una classe da inserire nel tag del corpo che puoi capire come questo aiuti. Preferisco usare un'associazione dalla logica nella mia direttiva ... ma dalla direttiva come posso accedere all'ambito corretto? Quello che commento qui non è una risposta, ma alcune idee su questo problema. – landed

risposta

30

Se è necessario accedere all'elemento corpo dall'interno di una direttiva che viene applicata su un altro elemento, è possibile usufruire del servizio $document in questo modo ..

app.directive("myDirective", function($document) { 
    return function(scope, element, attr) { 
    var bodyWidth = $document[0].body.clientWidth; 
    console.log("width of body is "+ bodyWidth); 
    }; 
}); 

<button my-directive>Sample Button</button> 

Si potrebbe anche utilizzare i metodi DOM traversal fornito in jqLite (anche se sono molto meno potenti di quanto offre jQuery). Ad esempio, è possibile eseguire una ricerca ricorsiva utilizzando il metodo angular.element.parent() per trovare il tag del corpo.

+0

Mi dispiace, avrei dovuto menzionare. La mia direttiva è all'interno del tag del corpo. È possibile accedere al corpo, che può essere al di sopra dell'albero (non un elemento figlio) – bsr

+0

quindi, nel tuo esempio, è possibile ottenere la larghezza del corpo all'interno della cartella dove è stata applicata la directory TABELLA – bsr

+0

Ho aggiornato la mia risposta. – jessegavin

9

Ancora una variante con l'attuazione find() che è incluso nella jQLite di angolare:

app.directive("myDirective", function() { 
    return function(scope, element, attr) { 

    var body = angular.element(document).find('body'); 
    console.log(body[0].offsetWidth); 

    }; 
}); 
+1

Se si guarda il codice angolare sotto '$ SnifferProvider' vedrai un riferimento a' document.body', con 'document' semplicemente essendo' document = $ document [0] || {} ' – Izhaki