Piszę aplikację AngularJS, ale jestem w niej całkiem nowy, więc w poniższym kodzie zwróć uwagę na wszelkie problemy, które masz.
Moja aplikacja AngularJS definiuje w ten sposób:
var OfficeUIModule = angular.module("OfficeUI", ["ngSanitize"]);
Następnie mam kilka usług, które ładują dane z różnych plików JSon. Ale nie opublikuję kodu tutaj, ponieważ uważam, że to nieistotne.
Następnie mam kontroler, który w zasadzie wygląda tak:
OfficeUIModule.controller("OfficeUIController", function($scope) { });
Teraz chcę, aby kontroler wykonywał jakąś logikę podczas uruchamiania i wyświetlał na niej element DIV. Oto przypadek, co chcę zrobić:
- Pokaż
LoadingElement DIV podczas początkowej konfiguracji. - Pokaż
DisplayingElement DIV po zakończeniu inicjalizacji.
Powiedzmy, że w moim kontrolerze mam metodę inicjalizacji aplikacji:
OfficeUIModule.controller("OfficeUIController", function($scope) {
function Init() {
// I"ll load all the data from the services here.
}
});
Aby wywołać tę metodę podczas uruchamiania, po prostu definiuję ją w moim kontrolerze w następujący sposób:
OfficeUIModule.controller("OfficeUIController", function($scope) {
Init();
function Init() {
// I"ll load all the data from the services here.
}
});
A HTML, którego chciałbym użyć, jest następujący:
<body>
<div id="loading">LOADING</div>
<div id="displaying">DISPLAYING</div>
</body>
Po pierwszym załadowaniu strony chciałbym pokazać element „Ładowanie”. Po załadowaniu strony chciałbym pokazać element „Wyświetlanie”.
Aby umożliwić testowanie, zmieniłem metodę kontrolera Init aby uwzględnić limit czasu 5 sekund, tak jak poniżej:
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);
}
});
Tak więc w tym konkretnym przypadku chciałbym upewnić się, że strona jest ładowana, wyświetlając div LOADING i po 5 sekundach wyświetlić div DISPLAYING.
Chciałbym również, aby nie było migotania, dlatego też można użyć ng-cloak, który przeczytałem, ale nie mogę go poprawnie skonfigurować.
Oto, co już próbowałem:
ŁADOWANIE WYŚWIETLANIE
Jednak ta konfiguracja nie działa całkiem dobrze.
Włączyłem Plunker abyś mógł przetestować dostarczone przez siebie rozwiązanie.
Odpowiedzi:
3 dla odpowiedzi № 1Dzieje się tak, ponieważ używasz setTimeout z anonimową funkcją i angularjs nie jest świadomy zmiany modelu
http://plnkr.co/edit/FJ2lnrmtG7P3HXZuxRkH?p=preview
jeśli używasz angularjs $timeout to działa
$timeout(function() {
$scope.initialized = true;
}, 5000);
możesz również użyć $scope.$digest() lub $scope.$apply aby działało
0 dla odpowiedzi nr 2
Możesz użyć kątowej wersji zdarzenia obciążenia okna.
angular.element($window).bind("load", function(e) {
// code to execute
});