如何禁用双击img标签

Question

我有一个删除img，并点击它将进行api调用并删除记录，但双击它正在进行多个api调用。我尝试禁用双击使用ng-dblclick =“返回false;”但没用。有人可以帮助我如何禁用使用角度js双击img标签？

PS：我已经看到这种做法正在div标签

感谢

Answer 1

这里是你如何能避免多个API调用的例子。它可能看起来不同于你的代码，但由于你没有提供任何代码，这是我能做的最好的。

在您的控制器中，您将有一个变量，您在第一次点击时设置为true，并在API调用返回响应时设置为false。每次执行API调用的函数时，都要检查这个变量是否为真。如果是这样，您只需在再次进行API调用之前返回即可。这是代码（我在这里跳过最佳实践，以保持样本最小）：

angular.module('app').controller('myController', function($http){ 
    var ctrl = this; 
    ctrl.isDeleting = false; 

    ctrl.deleteRecord = function(id){ 
     if(ctrl.isDeleting){ 
      return; 
     } 

     ctrl.isDeleting = true; 
     $http.delete('[your_api_url]/' + id).finally(function(){ 
      ctrl.isDeleting = false; 
     }); 
    }; 
}); 

然后你的HTML应该是这样的：

<img src="images/delete.png" ng-click="$ctrl.deleteRecord(id)" ng-class="{'img-disabled': $ctrl.isDeleting}" /> 

，并添加一些CSS视觉反馈给用户：

.img-disabled { 
    cursor: default; 
    opacity: 0.5; 
} 

就是这样。

重申一下，我不知道你的代码是怎么样的，所以我已经做出了一些假设，你在应用这个解决方案时必须考虑到。

Answer 2

最简单的办法是：

<img src="Tulips.png" alt="Add" height="25" width="25" ng-disabled="!isEnabled" ng-click="!isEnabled"></img> 

var app = angular.module('main', []). 
controller('DemoCtrl', function($scope, $filter) { 
$scope.isEnabled=true; 
});