Sto scrivendo un'applicazione AngularJS, ma sono abbastanza nuovo, quindi nel codice sottostante, per favore indica tutti i problemi che hai.
Ho la mia applicazione AngularJS definita in questo modo:
var OfficeUIModule = angular.module("OfficeUI", ["ngSanitize"]);
Quindi, ho un paio di servizi che caricano i dati da vari file JSon. Ma non pubblicherò il codice qui, perché lo credo irrilevante.
Quindi ho il mio controller che sostanzialmente assomiglia a questo:
OfficeUIModule.controller("OfficeUIController", function($scope) { });
Ora, voglio che il controller esegua una logica all'avvio e mostri un elemento DIV su di esso. Ecco cosa voglio fare:
- Mostra a
LoadingElemento DIV durante la configurazione iniziale. - Mostra a
DisplayingElemento DIV quando l'inizializzazione è stata eseguita.
Diciamo che nel mio controller ho un metodo per inizializzare l'applicazione:
OfficeUIModule.controller("OfficeUIController", function($scope) {
function Init() {
// I"ll load all the data from the services here.
}
});
Per chiamare questo metodo all'avvio, lo definisco nel mio controller in questo modo:
OfficeUIModule.controller("OfficeUIController", function($scope) {
Init();
function Init() {
// I"ll load all the data from the services here.
}
});
E l'HTML che vorrei utilizzare è il seguente:
<body>
<div id="loading">LOADING</div>
<div id="displaying">DISPLAYING</div>
</body>
Quando la pagina è inizialmente caricata, vorrei mostrare l'elemento "Caricamento". Quando la pagina è stata caricata, vorrei mostrare l'elemento "Visualizzazione".
Per renderlo testabile, ho cambiato il metodo del controller Init per includere un timeout di 5 secondi, proprio come di seguito:
OfficeUIModule.controller("OfficeUIController", function($scope) {
Init();
function Init() {
setTimeout(function() {
alert("Page has been loaded. When you click OK the displaying DIV should be showed.");
}, 5000);
}
});
Quindi, in questo caso particolare, vorrei assicurarmi che la pagina si stia caricando, visualizzando il div LOADING e dopo 5 secondi, visualizzo il div DISPLAYING.
Vorrei anche non vedere alcun tremolio, quindi ng-cloak può essere usato se l'ho letto, ma non riesco a configurarlo correttamente.
Ecco cosa ho già provato:
CARICAMENTO IN CORSO VISUALIZZAZIONE
Tuttavia, questa configurazione non funziona abbastanza bene.
Ho incluso un Plunker in modo da poter testare la soluzione fornita.
risposte:
3 per risposta № 1Succede perché stai usando setTimeout con funzione anonima e angularjs non è a conoscenza del cambiamento di modello
http://plnkr.co/edit/FJ2lnrmtG7P3HXZuxRkH?p=preview
se usi angularjs $timeout Funziona
$timeout(function() {
$scope.initialized = true;
}, 5000);
potresti anche usare $scope.$digest() o $scope.$apply per farlo funzionare
0 per risposta № 2
È possibile utilizzare la versione angolare dell'evento di caricamento della finestra.
angular.element($window).bind("load", function(e) {
// code to execute
});