Mam pozornie prosty problem bez widocznego (czytając dokumentację Angular JS) rozwiązania.
Mam dyrektywę Angular JS, która wykonuje obliczenia na podstawie wysokości innych elementów DOM, aby zdefiniować wysokość kontenera w DOM.
Coś podobnego dzieje się w dyrektywie:
return function(scope, element, attrs) {
$('.main').height( $('.site-header').height() - $('.site-footer').height() );
}
Problem polega na tym, że po uruchomieniu dyrektywy $('site-header')
nie można jej znaleźć, zwracając pustą tablicę zamiast potrzebnego elementu DOM opakowanego w jQuery.
Czy istnieje wywołanie zwrotne, którego mogę użyć w ramach mojej dyrektywy, które działa dopiero po załadowaniu DOM i mogę uzyskać dostęp do innych elementów DOM za pośrednictwem zwykłych zapytań w stylu selektora jQuery?
Odpowiedzi:
Zależy to od tego, jak skonstruowany jest Twój $ ('site-header').
Możesz spróbować użyć $ timeout z 0 opóźnieniem. Coś jak:
Wyjaśnienia, jak to działa: raz , dwa .
Nie zapomnij wstrzyknąć
$timeout
w swojej dyrektywie:źródło
$timeout
do dyrektywy. Doh. Teraz wszystko działa, na zdrowie.$timeout
do takiej dyrektywy:.directive('sticky', function($timeout) { return function (scope, element, attrs, controller) { $timeout(function(){ }); }); };
Oto jak to robię:
źródło
element.ready(function(){
Prawdopodobnie autor nie będzie już potrzebował mojej odpowiedzi. Jednak ze względu na kompletność uważam, że inni użytkownicy mogą uznać to za przydatne. Najlepszym i najprostszym rozwiązaniem jest użycie
$(window).load()
wewnątrz treści zwracanej funkcji. (alternatywnie możesz użyćdocument.ready
. To naprawdę zależy, czy potrzebujesz wszystkich obrazów, czy nie).$timeout
Moim skromnym zdaniem używanie jest bardzo słabą opcją i w niektórych przypadkach może się nie powieść.Oto pełny kod, którego użyłbym:
źródło
jest
ngcontentloaded
wydarzenie, myślę, że możesz to wykorzystaćźródło
$ $window
to robi?Jeśli nie możesz użyć $ timeout ze względu na zasoby zewnętrzne i nie możesz użyć dyrektywy z powodu konkretnego problemu z synchronizacją, użyj emisji.
Dodaj
$scope.$broadcast("variable_name_here");
po zakończeniu żądanego zasobu zewnętrznego lub długotrwałego kontrolera / dyrektywy.Następnie dodaj poniższe po załadowaniu zasobu zewnętrznego.
Na przykład w obietnicy odroczonego żądania HTTP.
źródło
Miałem podobny problem i chcę podzielić się tutaj moim rozwiązaniem.
Mam następujący HTML:
Problem: W funkcji linkującej dyrektywy nadrzędnego div chciałem jzapytać o podrzędny div # sub. Ale to po prostu dało mi pusty obiekt, ponieważ ng-include nie skończył się, gdy uruchomiono funkcję link dyrektywy. Więc najpierw zrobiłem brudne obejście z $ timeout, który działał, ale parametr opóźnienia zależał od szybkości klienta (nikt tego nie lubi).
Działa, ale jest brudny:
Oto czyste rozwiązanie:
Może to komuś pomoże.
źródło