在第一次點擊後取消綁定元素的單擊事件並在角度js後執行操作後重新綁定它

Question

我有一個ng-repeat項目列表，每個項目都有一個刪除按鈕。刪除按鈕的動作是一些Ajax請求。我的問題是，如果用戶在刪除按鈕上單擊多次，我的api調用將失敗，因爲它在第一次單擊時被刪除，而傳遞ID在第二次單擊中無效。 我想在第一次點擊後取消綁定點擊並重新綁定我的ajax請求成功回調。

這是我曾嘗試是

HTML

<li ng-repeat="labels in addedLabels track by $index"> 
    {{labels.Label.label_name}} 
    <button ng-click="removeLabel(labels.label_id, labels.module_id,$index,true,$event);"> 
    </button> 
</li> 

控制器中

$scope.removeLabel = function(label_id,module_id,index,popup,event){ 
    $(event.currentTarget).off('click') 
    opts.url = SERVER_URL + 'path'; 
    opts.data = { 
       label_id: label_id, 
       module_id : module_id 
      }; 
    $http.post(opts.url,opts.data) 
    .then(function(response){ 
     // some action 
    },function(err){ 
     // error action 
    }).finally(function(){ 
     $(event.currentTarget).on('click') 
    }) 

Answer 1

disable編輯按鈕，直到刪除API調用響應通往成功或者失敗。也可以通過labels對象到removeLabel方法，這樣可以很容易的從屬性中獲取相同的屬性。

的Html

<li ng-repeat="labels in addedLabels track by $index"> 
    {{labels.Label.label_name}} 
    <button ng-disabled="labels.disabled" ng-click="removeLabel(labels,$index,true,$event);"> 
    </button> 
</li> 

代碼

$scope.removeLabel = function(label, module_id, index, popup, event) { 
    opts.url = SERVER_URL + 'path'; 
    opts.data = { 
     label_id: label.label_id, 
     module_id: label.module_id 
    }; 
    label.disabled = true; //disabling button 
    $http.post(opts.url, opts.data) 
     .then(function(response) { 
     // some action 
    }, function(err) { 
     // error action 
    }).finally(function() { 
     label.disabled = false; //enabling it 
    }) 
}