Question

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

PS：我看到这种方法正在处理div标签

由于

Answer 1

以下是一个如何避免多个api调用的示例。它看起来可能与您的代码不同，但由于您没有提供任何代码，这是我能做的最好的。

在你的控制器中你有一个变量，你在第一次点击时设置为true，当你的API调用返回一个响应时设置为false。每次执行API调用的函数时，都会检查此变量是否为true。如果是，则只需在再次进行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;
});

如何禁用双击img标签

2 个答案: