Come posso differire il rendering della visualizzazione finché alcuni dati non vengono caricati da una fonte esterna?

Question

La mia applicazione deve caricare alcuni dati nello $rootScope da un'origine esterna durante l'inizializzazione. Poiché i dati provengono da una fonte esterna, il tempo richiesto per caricare i dati non è garantito. Voglio posticipare il rendering della vista fino a quando non sono stati caricati correttamente i dati. C'è un modo per ottenere questo?

Nota che non sto utilizzando il routing Angolare per questa app.

Ecco un simplified demo

Answer 1

Non c'è un modo pulito per evitare che la vista dal rendering fino a quando un'operazione asincrona viene completata senza utilizzare risolve percorso, ma si potrebbe programmare una direttiva personalizzata per fare lo stesso lavoro.

Tuttavia, se questo è strettamente per l'esperienza degli utenti, quindi utilizzando ngShow avrebbe funzionato a meraviglia:

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

Ecco un Plunker aggiornamento: http://plnkr.co/edit/MXoQNWHvyp9aOXg0QOoC?p=preview

Answer 2

Per me, non era semplicemente una questione di interfaccia utente sfarfallio. Poiché i dati non sono stati caricati prima del rendering, la mia scelta bootstrap non ha scelto il valore dei dati associato. Sono stato in grado di risolvere il problema mettendo un "ng-if" nel contenitore che avvolge il menu a discesa di selezione, come di seguito:

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

Speriamo che questo aiuta qualcuno che è bloccato con un problema simile (nota: ho anche incorporato il modulo nya-bootstrap-select nel mio progetto - bower install nya-bootstrap-select)