Estou escrevendo um aplicativo AngularJS, mas sou muito novo nele, portanto, no código a seguir, indique quaisquer problemas que você tenha.
Eu tenho meu aplicativo AngularJS definido assim:
var OfficeUIModule = angular.module("OfficeUI", ["ngSanitize"]);
Então, eu tenho alguns serviços que carregam dados de vários arquivos JSon. Mas não vou postar o código aqui, porque acredito que isso é irrelevante.
Então eu tenho meu controlador que basicamente se parece com isto:
OfficeUIModule.controller("OfficeUIController", function($scope) { });
Agora, quero que o controlador execute alguma lógica na inicialização e mostre um elemento DIV nele. Aqui está o que eu quero fazer:
- Mostrar um
LoadingElemento DIV durante a configuração inicial. - Mostrar um
DisplayingElemento DIV quando a inicialização foi concluída.
Digamos que em meu controlador eu tenha um método para inicializar o aplicativo:
OfficeUIModule.controller("OfficeUIController", function($scope) {
function Init() {
// I"ll load all the data from the services here.
}
});
Para chamar esse método na inicialização, eu apenas o defino em meu controlador da seguinte forma:
OfficeUIModule.controller("OfficeUIController", function($scope) {
Init();
function Init() {
// I"ll load all the data from the services here.
}
});
E o HTML que eu gostaria de usar é o seguinte:
<body>
<div id="loading">LOADING</div>
<div id="displaying">DISPLAYING</div>
</body>
Quando a página for carregada inicialmente, gostaria de mostrar o elemento "Carregando". Quando a página for carregada, gostaria de mostrar o elemento "Exibindo".
Para tornar isso testável, mudei meu método de controlador Init para incluir um tempo limite de 5 segundos, assim como abaixo:
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);
}
});
Portanto, neste caso em particular, gostaria de ter certeza de que a página está sendo carregada, exibindo a div LOADING e após 5 segundos, exibindo a div DISPLAYING.
Eu também gostaria de não ver nenhuma cintilação e, portanto, ng-cloak pode ser usado. Eu li, mas não consigo configurá-lo corretamente.
Aqui está o que eu já tentei:
CARREGANDO EXIBINDO
No entanto, essa configuração não funciona muito bem.
Eu incluí um Plunker para que você possa testar a solução fornecida.
Respostas:
3 para resposta № 1Acontece porque você está usando setTimeout com função anônima e angularjs não está ciente da mudança de modelo
http://plnkr.co/edit/FJ2lnrmtG7P3HXZuxRkH?p=preview
se você usar angularjs $timeout funciona
$timeout(function() {
$scope.initialized = true;
}, 5000);
você também pode usar $scope.$digest() ou $scope.$apply para fazer funcionar
0 para resposta № 2
Você pode usar a versão angular do evento de carregamento de janela.
angular.element($window).bind("load", function(e) {
// code to execute
});