« Voltar
em frontend angularjs

Como esconder um elemento html após alguns segundos.

(só pra constar: nos exemplos a seguir estou partindo do ponto que tenho o Angular já importado na minha aplicação, omiti esse código por questões de legibilidade)

Vamos supor que eu tenha o seguinte formulário para cadastrar um produto:

<p ng-show="mensagem.length">{{mensagem}}</p>

<form class="row" ng-submit="salvar()" name="formulario">  
    <label>Nome</label>
    <input name="nome" ng-model="produto.nome" required>
    <label>Preço</label>
    <input name="preco" ng-model="produto.preco" required>
</form>  

Apenas um simples formulário com dois campos e um parágrafo para mostrar uma mensagem de sucesso ou erro quando eu cadastrar um produto.

O que quero fazer é o seguinte: quando eu conseguir efetuar o cadastro, quero mostrar uma mensagem "Cadastro efetuado com sucesso", mas só por uns 3 segundos.
Com o Angular, isso é bem tranquilo de fazer.

Primeiramente, vou adicionar a diretiva ng-hide no meu parágrafo:

<p ng-show="mensagem.length" ng-hide="esconderMensagem">{{mensagem}}</p>  
//restante do código do formulário

A diretiva Ng-hide funciona da seguinte maneira: quando o valor da variável *esconderMensagem *for true, ela irá esconder o elemento.

Mas e essa variável esconderMensagem, cadê?!

Vamos criá-la no escopo do controller que utilizarei pare esse formulário, o ProdutoController. Vou já também criar a variável produto, por enquanto vazia:

meuApp  
.controller('ProdutoController', function($scope) {
   $scope.esconderMensagem = false;
   var produto = {};
}

Inicializei com o valor false, porque não quero mostrar a mensagem quando entrar no meu formulário, apenas quando eu cadastrar um produto. Vamos então criar a função salvar no escopo, que foi a função que defini que será executada no ng-submit do meu formulário. Para salvar, injetarei o serviço $http no meu controller:

meuApp  
.controller('ProdutoController', function($scope, $http) {
   var produto = {};
   $scope.esconderMensagem = false;

   $scope.salvar = function() {
       $http.post('api/produto', produto)
       .success(function() {
           $scope.mensagem = "Produto cadastrado com sucesso";
       })
       .error(function(erro) {
           $scope.mensagem = erro;
       });
   }
}

Até aqui nada de novo, estou fazendo um POST para meu serviço que grava o produto e mostrando uma mensagem de sucesso em caso de sucesso e de erro em caso de qualquer problema.

Agora vamos lá: quando der tudo certo, quero mostrar a mensagem mas por apenas 3 segundos. Precisamos mudar o valor daquela variável, a esconderMensagem.
Mas quando? Depois que eu gravar, certo?
Então vamos lá:

meuApp  
.controller('ProdutoController', function($scope, $http) {
   var produto = {};
   $scope.esconderMensagem = false;

   $scope.salvar = function() {
       $http.post('api/produto', produto)
       .success(function() {
           $scope.mensagem = "Produto cadastrado com sucesso";
           $scope.esconderMensagem = true;
       })
       .error(function(erro) {
           $scope.mensagem = erro;
       });
   }
}

Mudei, mas será o suficiente?
Não né? Afinal, eu vou mostrar a mensagem e logo em seguida sumir com ela. Não vai nem dar tempo de ver.
Podemos então usar o serviço $timeout, que conseguimos injetando no controller:

meuApp  
.controller('ProdutoController', function($scope, $http, $timeout) {
   var produto = {};
   $scope.esconderMensagem = false;
   //restante do código
}

Agora, vamos utilizar o $timeout. Ele funciona da seguinte forma: passamos para ele uma função que queremos executar e em quanto tempo queremos que ele a execute(em milissegundos).
Simples assim:

meuApp  
.controller('ProdutoController', function($scope, $http, $timeout) {
   var produto = {};
   $scope.esconderMensagem = false;

   $scope.salvar = function() {
       $http.post('api/produto', produto)
       .success(function() {
           $scope.mensagem = "Produto cadastrado com sucesso";
           $timeout(function () {
               $scope.esconderMensagem = true;
           },
           3000);
       })
       .error(function(erro) {
           $scope.mensagem = erro;
       });
   }
}

Tranquilo, não é? :)

Agora, pense nas possibilidades: o que fizemos foi apenas esconder um elemento, mas você pode fazer muitas outras coisas e de forma bastante simples.

comments powered by Disqus