1

Tenho um objeto que indica que a página está sendo carregada. Porém, não está funcionando da forma correta, segue código:

HTML:

<div class="fundo_login">
  <div class="carregando_inicio" ng-if="carregando == true"> //Quando carregando for TRUE mostra o spinner
    <img src="/provas/app/imagens/spinning-circles.svg"/>
  </div>
  <div class="box_login" ng-if="carregando == false"> //Quando for false, mostra o conteúdo.
    <div class="painel_cadastro">
      <div class="logo_fabet">
        <img src="app/imagens/logo_fabet.jpg">
      </div>
    </div>
  </div>
</div> 

JS:

$scope.carregando = true;

$scope.acabou = function() {
    $timeout(function(){
        $scope.carregando = false;
    }, 3000);
}

$scope.acabou();

Percebam que caregando inicia como TRUE para que logo apareça o spinner, depois de 3 segundos seu status é alterado para FALSE, fazendo com que assim desapareça o spinner e apareça o conteúdo. Em partes esta funcionando. O que está errado é que quando a página começa a carregar, os dois aparecem juntos (durante alguns milésimos de segundo), não respeitando o ng-if, conforme imagem abaixo:

inserir a descrição da imagem aqui

Outra dúvida, como eu poderia fazer para sumir o spinner e mostrar o conteúdo somente quando a página estiver totalmente carregada?

1
  • Podes postar o código do seu controller completo?
    – Jackson
    20/10/2017 às 19:11

2 Respostas 2

1

Amigo,

Aparentemente você não inseriu o $timeout no seu controller. ele precisa ser injetado para que você possa utiliza-lo dentro do seu controller, tal como o $scope é.

Fiz um PLUNKER com praticamente o mesmo código que você fez, mas injetando o $timeout no controller.

Em relação à sua outra pergunta, se você sumir com o body, você não vai conseguir mostrar spinner. Englobe seu Content em uma div e faça o spinner desacoplado. Segue exemplo abaixo:

<body ng-app="meuApp">

   <div ng-if="!bodyCarregou"> meu spinner </div> 

   <div ng-if="bodyCarregou"> // mostrar se for true
      // Progame sua página dentro deste DIV
   </div>

</body>

Deixo aqui a documentação do $TIMEOUT para leitura.

Espero ter ajudado.

-1

Acredito que o problema seja teus scripts sendo carregados dentro da tag <body>.

Quando o html é renderizado no browser, os scripts dentro da tag <body> contendo o angular e o teu controller ainda não foram carregados, logo o ng-if ainda não foi interpretado. Quando o script for interpretado, aí tudo vai acontecer corretamente. Esses milésimos de segundo que você está percebendo, é o tempo que o browser demora para executar teus scripts.

Para forçar teus scripts a executaram antes do <body> ser carregado, você precisa colocar eles dentro da tag <head> no seu html. Ex:

<html>
<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
    <script type="text/javascript" src="angular/controller.js"></script>
</head>
<body>
    <div class="fundo_login">
      <div class="carregando_inicio" ng-if="carregando == true"> //Quando carregando for TRUE mostra o spinner
        <img src="/provas/app/imagens/spinning-circles.svg"/>
      </div>
      <div class="box_login" ng-if="carregando == false"> //Quando for false, mostra o conteúdo.
        <div class="painel_cadastro">
          <div class="logo_fabet">
            <img src="app/imagens/logo_fabet.jpg">
          </div>
        </div>
      </div>
    </div> 
</body>
</html>
2
  • Tens a razão, porém neste caso é indiferente
    – Jackson
    20/10/2017 às 19:22
  • @Jackson o que exatamente é indiferente? Teu comentário ficou vago... 20/10/2017 às 19:53

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .