3

Eu tenho um campo de texto e botão para enviar esse texto. Está tendo um pequeno delay, após eu clicar no botão de enviar até a mensagem ser enviada. Então, preciso desabilitar o campo de texto e o botão, até que a mensagem seja enviada e apareça na tela, depois habilito eles novamente. Como posso fazer isso usando Angular?

HTML:

<label class="item-input-wrapper">
    <input type="text" ng-focus="inputUp()" ng-blur="inputDown()" ng-disabled="!mensagem" ng-model="mensagem.msg" placeholder="Texto" />
</label>
<button class="button button-small" ng-click="enviarMsg(mensagem)">Enviar</button>

controller:

$scope.enviarMsg = function (mensagem) {
    //console.log(mensagem);
    var dia = moment().format(); //2016-02-16 T 16:05:52-02:00
    var diaP = dia.split('T');
    var dia = diaP[0];

    var horaP = diaP[1];
    var horaP2 = horaP.split(':');
    var hora = horaP2[0]+':'+horaP2[1];

    var enviaMsg = {
        mensagem: mensagem,
        idUsuario: $window.localStorage.getItem('idUsuario'),
        idCep: $window.localStorage.getItem('idCep'),
        nome: $window.localStorage.getItem('nome'),
        dia: dia,
        hora: hora
    }

    $http.post("http://www.vigilantescomunitarios.com/www/php/enviaMsgLogra.php", enviaMsg).success(function (data){
        //console.log(data);
        pegaMsgsLogra();
        $scope.mensagem = {
          msg: ""
        }

    });
}

1 Resposta 1

2

Você pode criar uma variável booleana pra tratar esse problema. Ex:

$scope.disableButton = false;

No inicio da função enviarMsg você seta a variável como true: $scope.disableButton = true;.

No final, depois te enviar a mensagem é só atribuir a variável como false novamente

Depois é só colocar a diretiva ng-disabled no código do botão:

 <button class="button button-small" ng-click="onTimeout()" ng-disabled="disableButton">Enviar</button>

Exemplo(Fiz um timer de 5 segundos pra simular uma requisição):

var myApp = angular.module('myApp', []);


myApp.controller('MyCtrl', function($scope, $timeout) {
    $scope.disableButton = false;

    $scope.counter = 0;
    $scope.onTimeout = function() {
        //Assim que entrar na função seta como true
        $scope.disableButton = true;
        $scope.counter++;
        mytimeout = $timeout($scope.onTimeout, 1000);
        if ($scope.counter >= 5) {
            $timeout.cancel(mytimeout);
            //Depois de terminar a requisição seta como false
            $scope.disableButton = false;
            $scope.counter = 0;

        }
    }


});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
   {{counter}}
   <button class="button button-small" ng-click="onTimeout()" ng-disabled="disableButton">Enviar</button>
</div>

5
  • Legal Techies! Vou tentar. Commented 25/02/2016 às 20:03
  • @GustavoSevero tudo bem. Commented 25/02/2016 às 20:08
  • 1
    Ficou show de bola Techies Commented 25/02/2016 às 21:02
  • Eu só não coloquei o "temporizador". Commented 25/02/2016 às 21:02
  • @GustavoSevero boa sorte com seus códigos :D Commented 25/02/2016 às 21:51

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 .