0

Preciso criar um loadbar e deixa-lo ativo até a função terminar. Consigo fazer isso no angular?

$scope.getPosts = function () {
    $http({
        method: 'POST',
        url: '/getPosts',
    }).then(function(response) {
        return response.data;
    }, function(error) {
        console.log(error);
    });
};
3

1 Resposta 1

0

Sim, é possível.

Basicamente você vai controlar o "loader" usando a diretiva ng-if.

Veja um exemplo:

angular.module('app', []).controller('mainController', mainController);

function mainController($http) {
  let ctrl = this;
  ctrl.loading = false;

  ctrl.iniciar = () => ctrl.loading = true;
  ctrl.parar = () => ctrl.loading = false;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="mainController as main">
  <div ng-if="main.loading">
    Carregando <br>
    <i class="fa fa-spinner fa-spin"></i>
  </div>
  <button ng-click="main.iniciar()">Iniciar</button>  
  <button ng-click="main.parar()">Parar</button>
</div>

2
  • Poderia mostrar um exemplo em que apenas com o clique de botão o loader aparece? Commented 24/01/2018 às 14:12
  • @AntonioBrazFinizola Pronto
    – Jéf Bueno
    Commented 24/01/2018 às 14:36

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 .