1

Estou precisando de uma maneira de bloquear um botão até que a função do ng-click seja completada, para evitar que o usuário clique novamente no botão, pensando que não aconteceu nada ou algo do tipo.

Existe alguma boa maneira de se fazer isso, usando diretivas ao algo do tipo?

4
  • Sempre tente postar o que fez junto para não ter downvotes
    – Otto
    Commented 30/08/2018 às 13:27
  • certo, me desculpe.
    – Brayan
    Commented 30/08/2018 às 13:34
  • +1 a pergunta é boa e a explicação dispensa a colocação de códigos. Commented 30/08/2018 às 13:39
  • 1
    Retiro o que eu disse, após ver o seu questionamento. Você deveria ter colocado essa informação na pergunta antes de o AR responder. Commented 30/08/2018 às 13:45

2 Respostas 2

3

Uma forma simples de fazer isto:

<button ng-click="save()" ng-disabled="isProcessing">Save</button>


$scope.save = function(){
  $scope.isProcessing = true;
  $http.post('localhost', data).success(
    $scope.isProcessing = false;
  );
}
4
  • Então, eu havia pensado nesta possibilidade só que como são muitos botões para alterar, estava tentando achar uma solução mais pratica, não sei se existe uma diretiva ou algo assim que possa me ajudar.
    – Brayan
    Commented 30/08/2018 às 13:33
  • 1
    @Brayan é só aplicar a mesma lógica atribuindo a um objeto ligado a um botão. A resposta não precisa necessariamente fazer pra você. Ele já te mostrou o caminho ;) Commented 30/08/2018 às 13:44
  • Entendi, irei fazer desta forma então, Obrigado :D
    – Brayan
    Commented 30/08/2018 às 13:46
  • @Brayan se estiver usando o ng-repeat, você pode fazer usando o objeto do ng-repeat (eu sempre faço assim) Commented 30/08/2018 às 13:47
2

Como complemento à resposta do Otto, sugiro você usar finally ao invés de then, pois, se ocorrer uma falha, a variável que indica carregamento ficará travada "para sempre".

Eu faria assim:

<button ng-click="save()" ng-disabled="isProcessing">Save</button>


$scope.save = function(){
  $scope.isProcessing = true;
  $http.post('localhost', data)
  .finally(function () {
      $scope.isProcessing = false;
  })
 .then(function (response) {
      $scope.resposta = response.data;
  })
}

O finally é executado sempre ao final da requisição, independente de ter terminado com falha ou não.

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 .