imgタグのダブルクリックを無効にする方法

Question

私は1つの削除imgを持っており、それをクリックするとAPI呼び出しを行い、レコードを削除しますが、ダブルクリックすると複数のAPI呼び出しが行われます。 ng-dblclick = "return false;を使用してダブルクリックを無効にしました。使用しません。いくつかの1つ私を助けることができますどのように角度jsを使用してimgタグのダブルクリックを無効にするには？

PS：私はこのアプローチを見ているのdivタグに

おかげ

Answer 1

を働いているがここでは、複数のAPI呼び出しを避けることができる方法の例です。あなたのコードと異なって見えるかもしれませんが、あなたが提供していないので、これが私ができる最高のものです。

あなたのコントローラには、最初のクリック時にtrueに設定され、API呼び出しが返されたときにfalseに設定される変数があります。 API呼び出しを行う関数が実行されるたびに、この変数が真であるかどうかをチェックします。そうであれば、API呼び出しを再度行う前に戻ります。これは、コード（私は、最小限のサンプルを維持するために、ここでのベストプラクティスをスキップしています）です：次に、あなたのHTMLは次のようになります

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; 
     }); 
    }; 
}); 

：

<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; 
});