2013-04-30 11 views
9

Biorąc pod uwagę strukturę HTML podobnego do tego:Access (ciało) w funkcji dyrektywa łącza

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

Kiedy próbuję uzyskać dostęp do elementu nadrzędnego two to działa i dziennik zwraca div nadrzędnej, ale kiedy rodzic jest ciałem, tak jak w przypadku one, nie działa i zwraca pusty zestaw.

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

EDIT: Domyślam tego problemu jest to, że ciało mojego app jest renderowane na stronie klienta i dołączone do elementu body na metodzie run modułu. HTML jest wstawiany z $('body').html($compile(body.render())($rootScope)); i przypuszczam, że dyrektywa jest wywoływana w ramach funkcji $ compile zanim zawartość zostanie wstawiona do treści. Czy mogę obejść ten problem?

+3

wydaje się działać zgodnie z oczekiwaniami: http://jsfiddle.net/mTNvq/ – Langdon

+0

To dziwne , teraz mam kilka wskazówek, co może być problemem. – olanod

+2

Spróbuj użyć [$ evalAsync] (http://docs.angularjs.org/api/ng.$rootScope.Scope#$evalAsync) (wykonuje się po cyklu skoku Angular, a więc po manipulacjach Angular DOM, ale przed renderowaniem przeglądarki) lub [ $ timeout] (http://docs.angularjs.org/api/ng.$timeout) (wykonywany po renderowaniu przeglądarki) w funkcji łącza. –

Odpowiedz

0

Rzeczywiście poprawnie zrozumiałeś swój problem: $compile uruchomi kompilację szablonów i fazy łączenia w elemencie, dzięki czemu nie będzie rodzica podczas tego procesu.

Łatwy sposób naprawienia polega na tym, aby najpierw dołączyć kod HTML do ciała, a następnie , a następnie go skompilować.

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

Lub jeśli nie chcemy kompilować cały organizm, ale po prostu nowy element:

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