Wie kann ich das Rendering von Ansichten verzögern, bis einige Daten von einer externen Quelle geladen wurden?

Meine App muss einige Daten in die $rootScope von einer externen Quelle laden, wenn es initialisiert wird. Da die Daten von einer externen Quelle stammen, ist die zum Laden der Daten erforderliche Zeit nicht gewährleistet. Ich möchte das Rendering der Ansicht verzögern, bis die Daten erfolgreich geladen wurden. Gibt es einen Weg, dies zu erreichen?Wie kann ich das Rendering von Ansichten verzögern, bis einige Daten von einer externen Quelle geladen wurden?

Beachten Sie, dass ich das Angular Routing für diese App nicht verwende.

Hier ist ein simplified demo

Quelle

2013-04-09 tamakisquare

Warum benutzt du nicht '$ http'? Wir brauchen noch mehr Informationen, um zu antworten. –

@JoshDavidMiller - Ich verwende $ http. Es ist nur in dem mitgelieferten Beispiel-Code Ich habe $ http mit $ Timeout ersetzt, so dass ich lange Verzögerung emulieren kann und somit die spät-bindende Wirkung zeigen. Bitte lassen Sie mich wissen, welche anderen Informationen Sie suchen. Schlag mich mit deinen Fragen. Vielen Dank. – tamakisquare

Sie könnten auch '$ watch' zusammen mit' ng-show' verwenden, um das gewünschte Ergebnis zu erhalten. – callmekatootie

Es gibt keine saubere Art und Weise den Blick von Rendering, bis ein asynchroner Vorgang abgeschlossen ist, ohne Route Entschlüssen zu verwenden, um zu verhindern, aber man könnte eine benutzerdefinierte Richtlinie programmieren, um die gleiche Arbeit zu tun.

Wenn dies jedoch ausschließlich für User Experience ist, dann unter Verwendung von ngShow würde swimmingly arbeiten:

<div ng-show="user.name"> 
    <!-- content won't be visible until data is set --> 
</div>

Hier ist eine aktualisierte Plunker: http://plnkr.co/edit/MXoQNWHvyp9aOXg0QOoC?p=preview

Quelle

2013-04-09 17:39:44

Ich möchte dies aktualisieren und sagen, dass die ngCloak löst diese Art von Problem jetzt: Siehe die Referenz hier: https://docs.angularjs.org/api/ng/directive/ngCloak keine ngShow benötigt – DAG

@ DanielGroh Das könnte beim ersten Laden der Seite funktionieren, aber ich glaube nicht, dass es * zwischen * Seitenlade funktioniert. –

Sie sind richtig. Danke, dass du darauf hingewiesen hast – DAG

Für mich war es nicht einfach eine Frage der UI flackern. Da die Daten vor dem Rendern nicht geladen wurden, wählte meine Bootstrap-Auswahl nicht den zugehörigen Datenwert. Ich war in der Lage, das Problem zu lösen, indem sie ein „ng-if“ in dem Behälter Platzieren der ausgewählten Drop-Down Verpackung, wie folgt:

<div class='bootstrap-select-dropdown-wrapper' ng-if='listofthings.length > 0'>...</div>

Hoffentlich jemand hilft, die mit einem ähnlichen Problem (Anmerkung geklebt ist: Ich habe auch das nya-bootstrap-select-modul in mein projekt integriert - bower install nya-bootstrap-select)

Quelle

2016-06-03 23:07:42 eugene

Wie kann ich das Rendering von Ansichten verzögern, bis einige Daten von einer externen Quelle geladen wurden?

Antwort

Verwandte Themen