Ich habe ein scheinbar einfaches Problem ohne offensichtliche Lösung (durch Lesen der Angular JS-Dokumente) .
Ich habe eine Angular JS-Direktive, die einige Berechnungen basierend auf der Höhe anderer DOM-Elemente durchführt, um die Höhe eines Containers im DOM zu definieren.
Ähnliches geschieht in der Richtlinie:
return function(scope, element, attrs) {
$('.main').height( $('.site-header').height() - $('.site-footer').height() );
}
Das Problem ist , dass , wenn die Richtlinie ausgeführt wird , $('site-header')
kann nicht gefunden werden, ein leeres Array zurückkehr anstelle des jQuery gewickelt DOM - Element ich brauche.
Gibt es einen Rückruf, den ich in meiner Direktive verwenden kann und der erst ausgeführt wird, nachdem das DOM geladen wurde, und über die normalen Abfragen im jQuery-Selektorstil auf andere DOM-Elemente zugreifen kann?
Antworten:
Es hängt davon ab, wie Ihr $ ('Site-Header') aufgebaut ist.
Sie können versuchen, $ timeout mit einer Verzögerung von 0 zu verwenden. Etwas wie:
Erklärungen, wie es funktioniert: eins , zwei .
Vergessen Sie nicht,
$timeout
Ihre Richtlinie einzufügen:quelle
$timeout
in die Richtlinie übergegangen war . Doh. Alles funktioniert jetzt, Prost.$timeout
Richtlinie wie.directive('sticky', function($timeout) { return function (scope, element, attrs, controller) { $timeout(function(){ }); }); };
So mache ich das:
quelle
element.ready(function(){
Wahrscheinlich braucht der Autor meine Antwort nicht mehr. Der Vollständigkeit halber denke ich jedoch, dass andere Benutzer es nützlich finden könnten. Die beste und einfachste Lösung besteht darin,
$(window).load()
die zurückgegebene Funktion im Hauptteil zu verwenden . (Alternativ können Sie verwendendocument.ready
. Es hängt wirklich davon ab, ob Sie alle Bilder benötigen oder nicht).Die Verwendung ist
$timeout
meiner bescheidenen Meinung nach eine sehr schwache Option und kann in einigen Fällen fehlschlagen.Hier ist der vollständige Code, den ich verwenden würde:
quelle
Es gibt ein
ngcontentloaded
Ereignis, ich denke, Sie können es verwendenquelle
$ $window
tut?Wenn Sie $ timeout aufgrund externer Ressourcen nicht verwenden können und aufgrund eines bestimmten Zeitproblems keine Direktive verwenden können, verwenden Sie Broadcast.
Hinzufügen,
$scope.$broadcast("variable_name_here");
nachdem die gewünschte externe Ressource oder lang laufende Steuerung / Direktive abgeschlossen wurde.Fügen Sie dann das Folgende hinzu, nachdem Ihre externe Ressource geladen wurde.
Zum Beispiel im Versprechen einer verzögerten HTTP-Anfrage.
quelle
Ich hatte ein ähnliches Problem und möchte meine Lösung hier teilen.
Ich habe folgendes HTML:
Problem: In der Link-Funktion der Direktive des Eltern-Div wollte ich das Kind-Div # sub abfragen. Aber es gab mir nur ein leeres Objekt, weil ng-include nicht beendet war, als die Link-Funktion der Direktive ausgeführt wurde. Also habe ich zuerst eine schmutzige Problemumgehung mit $ timeout gemacht, die funktioniert hat, aber der Verzögerungsparameter hing von der Clientgeschwindigkeit ab (niemand mag das).
Funktioniert aber schmutzig:
Hier ist die saubere Lösung:
Vielleicht hilft es jemandem.
quelle