在第一次点击后取消绑定元素的单击事件并在角度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 
    }) 
}