Prevención / tratamiento de clics de doble botón en angular

Este tutorial fue analizado por nuestros especialistas así se garantiza la exactitud de nuestro post.

Solución:

Primero, será mejor que agregue ngDblclick, cuando detecte el doble clic, simplemente regrese false:

Si desea esperar a que finalice la llamada Ajax, puede desactivar el botón configurando ng-disabled

Y en su controlador, puede hacer

$scope.flag = false;
$scope.buttonClicked = function() 
    $scope.flag = true;
    Service.doService.then(function()
        //this is the callback for success
        $scope.flag = false;
    ).error(function()
        //this is the callback for the error
        $scope.flag = false;
    )

Debe manejar ambos casos cuando la llamada ajax tiene éxito o falla, ya que si falla, no desea que se muestre como desactivado para confundir al usuario.

Utilizando ng-disabled funcionó bien en este ejemplo. No importa cuán furiosamente hice clic, el mensaje de la consola solo se completó una vez.

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

app.controller('MainCtrl', function($scope) 
  $scope.submitData = function() 
    $scope.buttonDisabled = true;
    console.log("button clicked");
  

  function augment() 
    var name, fn;
    for (name in $scope) 
      fn = $scope[name];
      if (typeof fn === 'function') 
        if (name.indexOf("$") !== -1) 
          $scope[name] = (function(name, fn) 
            var args = arguments;
            return function() 
              console.log("calling " + name);
              console.time(name);
              fn.apply(this, arguments);
              console.timeEnd(name);
            
          )(name, fn);
        
      
    
  

  augment();
);

Tenía curiosidad por saber exactamente cuánto tarda angular en aplicar los cambios al buttonDisabled bandera. Si revisa la consola en el ejemplo de plunker, muestra cuánto tiempo tarda el $eval y $apply métodos a ejecutar. En mi máquina tomó un promedio de entre 1-2 milisegundos.

Acabo de ampliar el código de zsong para agregar un control en el controlador de la bandera. Si es true luego simplemente regrese porque ya se está manejando un clic. Esto evita los clics dobles sin preocuparse por la sincronización angular o ese tipo de cosas.

$scope.flag = false;
$scope.buttonClicked = function() 
    if ($scope.flag) 
        return;
    
    $scope.flag = true;
    Service.doService.then(function()
        //this is the callback for success
        $scope.flag = false;
    ).error(function()
        //this is the callback for the error
        $scope.flag = false;
    )

---

---

Utiliza Nuestro Buscador