2013-04-30 15 views
9

Data una struttura HTML simile a questo:Access (corpo) nella funzione direttiva collegamento

<body> 
    <div id="one" my-directive></div> 
    <div> 
     <div id="two" my-directive></div> 
    </div> 
</body> 

Quando provo ad accedere all'elemento genitore del two Funziona e il registro restituisce il div genitore, ma quando il genitore è il corpo, come nel caso one, non funziona e restituisce un set vuoto.

app.directive 'myDirective', -> 
    (scope,iElement,iAttrs) -> 
     console.log iElement.parent() 

EDIT: mia ipotesi per questo problema è che il corpo di mia applicazione è resa sul lato client ed è unito al elemento del corpo sul metodo run del modulo. L'html viene inserito con $('body').html($compile(body.render())($rootScope)); e suppongo che la direttiva venga chiamata all'interno della funzione $ compile prima che i contenuti vengano inseriti nel corpo. Posso aggirare questo problema?

+3

sembra funzionare come previsto: http://jsfiddle.net/mTNvq/ – Langdon

+0

Questo è strano , ora ho alcuni indizi su quale potrebbe essere il problema. – olanod

+2

Prova a utilizzare [$ evalAsync] (http://docs.angularjs.org/api/ng.$rootScope.Scope#$evalAsync) (viene eseguito dopo il ciclo di digest angolare, quindi dopo le manipolazioni del DOM angolare, ma prima del rendering del browser) o [ $ timeout] (http://docs.angularjs.org/api/ng.$timeout) (eseguito dopo il rendering del browser) nella funzione di collegamento. –

risposta

0

In effetti hai capito bene il tuo problema: $compile attiverà la compilazione del modello e le fasi di collegamento sul tuo elemento, quindi non ha genitore mentre lo fa.

Il modo semplice per risolvere è quello di aggiungere prima il codice HTML al corpo e quindi compilarlo.

var html = body.render(); 
$('body').html(html); 
$compile(angular.element(body))($rootScope); 

Oppure, se non si desidera compilare tutto il corpo, ma solo il nuovo elemento:

var elem = $(body.render()).appendTo($('body')); 
$compile(elem)($rootScope); 
Problemi correlati