已經運行的函數下次不會調用它

Question

我正在研究AngularJS項目我正在使用ng-repeat來顯示數據，有一個Edit按鈕可以對特定行進行編輯。點擊編輯按鈕時有Save和Cancel按鈕顯示。在保存按鈕上單擊它呼叫$http.post更新數據庫中的數據。數據顯示在gal單位和商店作爲liter所以當我點擊保存按鈕它首先轉換爲liter，然後存儲在分貝。

現在的問題是，當我點擊Save按鈕一旦它正常工作，但是當我點擊保存按鈕兩次它轉換加侖 - >升 - >升，然後保存到分貝。
所以我想要做的就是如果$http請求已在處理中，則不要接受另一個$http請求。
我試圖禁用該按鈕，但它仍然是可點擊的。

HTML：

<div class="taxi_output" ng-repeat="item in vmDosings.data track by $index" > 
          <div class="row"> 
           <div class="col-lg-4 text-center one" ng-bind="item.dos_nr"></div> 
           <div class="col-lg-4 text-center two"> 
            <div ng-if="item.enableContent"> 
             <input id="{{$index}}" class="font-size input-{{$index}}" ng-class="{ 'error' : vmDosings.error.level || vmDosings.error.undef || vmDosings.error.exist }" type="text" ng-model="item.level" ng-change="itemChanges(item)" ng-disabled="!item.enableContent"/> {{::$root.getEinheiten($root.GlobalData.config.volumemessurement)}} 
            </div> 
            <div ng-if="!item.enableContent" > 
             <p class=""> {{ item.level + ' ' + $root.getEinheiten($root.GlobalData.config.volumemessurement)}} </p> 
            </div> 
           </div> 
           <div class="col-lg-4" ng-if="item.enableContent == false" style="vertical-align: middle"> 
            <a class="btn" ng-click="enableContent(item, $index)" event-focus="click" event-focus-id="{{$index}}" tooltip-placement="bottom" tooltip="{{::$root.getLabel('edit')}}"> 
             <i style="cursor:pointer;" class="fa fa-edit fa-2x"></i> 
            </a> 
            <a class="btn" ng-if="vmDosings.data.length > 1" ng-click="removeFromList(item, $index)" tooltip-placement="bottom" tooltip="{{::$root.getLabel('delete')}}"> 
             <i style="cursor:pointer;" class="fa fa-trash fa-2x"></i> 
            </a> 
           </div> 
           <div class="col-lg-4" ng-if="item.enableContent == true"> 
            <a class="btn" ng-click="saveChanges(item, $index)" tooltip-placement="bottom" tooltip="{{::$root.getLabel('save')}}"> 
             <i style="cursor:pointer;" class="fa fa-save fa-2x"></i> 
            </a> 
            <a class="btn" ng-click="removeFromList(item, $index)" tooltip-placement="bottom" tooltip="{{::$root.getLabel('delete')}}"> 
             <i style="cursor:pointer;" class="fa fa-trash fa-2x"></i> 
            </a> 
            <a class="btn" ng-click="restoreChanges(item)" tooltip-placement="bottom" tooltip="{{::$root.getLabel('reset')}}"> 
             <i style="cursor:pointer;" class="fa fa-remove fa-2x"></i> 
            </a> 
           </div> 
          </div> 
          <div class="row"> 
           <div class="col-lg-12"> 
            <div ng-if="item.enableContent && vmDosings.validate == false"> 
             <div class="panel panel-danger" style="margin-top:5px; margin-bottom:0px;"> 
              <div class="panel-heading" style="padding:0"> 
               <ul style="padding: 5px 0px 5px 30px;"> 
                <li ng-if="vmDosings.error.level" ng-bind="getLabel('only_floats_with_one_digit')"></li> 
                <li ng-if="vmDosings.error.undef" ng-bind="getLabel('inputs_empty_not_allowed')"></li> 
                <li ng-if="vmDosings.error.exist" ng-bind="getLabel('data_already_exist')"></li> 
               </ul> 
              </div> 
             </div> 
            </div> 
           </div> 
          </div> 
          <div class="hr-line-dashed"></div> 
         </div> 

AngulrJS： 啓用編輯模式：

$scope.enableContent = function(data, $index) { 

      angular.forEach(vmDosings.data, function(value, key) { 
       vmDosings.data[key].enableContent = (value.id == data.id ? true : false); 
      }); 
      $timeout(function() { 
       $('.input-'+ $index).focus(); 
       $('.input-'+ $index).val($('.input-'+ $index).val()); 
      }); 
     } 

保存按鈕點擊：
$ rootScope.GlobalData.config.volumemessurement獲得單元的ID
$ rootScope.calcunits（ 9，id，data ['level']）;是一種用於轉換的功能

$scope.saveChanges = function(data) { 
      var id = $rootScope.GlobalData.config.volumemessurement; 
      data['level'] = $rootScope.calcunits(id, 9, data['level']); 
      checkValues(data); 
      var checked = true; 
      for (i in vmDosings.error) { 
      if (vmDosings.error[i]) { 
       checked = false; 
       vmDosings.validate = false; 
       break; 
      } 
      } 
      if(checked == true) { 
      DosingsServices.saveChanges(data).then(function (result) { 
       if(result.data.message == 'success' && result.data.status == 200) { 
        DosingsServices.getDosings($stateParams.taxi_id).then(function (result) { 
         //vmDosings.data = result.data.dosings 
         var data = result.data.dosings; 
         var id = $rootScope.GlobalData.config.volumemessurement; 
         var i = 0; 
         for(i = 0; i <= data.length; i++) { 
         angular.forEach(data[i], function(value, key){ 
          if(key == "level") 
          data[i][key] = $rootScope.calcunits(9, id, value) 
         }); 
         } 
         vmDosings.data = data; 
        }); 
       } 
       else if(result.data.message == 'Data Already Exist') { 
        data['level'] = $rootScope.calcunits(9, id, data['level']); 
        vmDosings.error.exist = true; 
        vmDosings.validate = false; 
       } 
      }); 
      } 
     } 

Answer 1

在您的發佈方法之前設置一個標誌var inProgress = true;。檢查發佈前是否設置了此標誌。當post方法結束時（最後）將flag設置爲false。

您也可以使用此標誌來啓用/禁用保存按鈕。

Answer 2

你需要的是攔截器方法$ httpProvider。它可以完全控制Angular範圍內的任何http調用（request，requestError，response，responseError方法）。

如果服務調用已在進行中，你可以跳過下一個呼叫或把它放在一個隊列，一旦你從以前的呼叫響應打電話給你想要的任何其他的事情

// register the interceptor as a service 

$provide.factory('myHttpInterceptor', function($q, dependency1, dependency2) { 
     return { 
     // optional method 
     'request': function(config) { 
      // do something on success 
      return config; 
     }, 

     // optional method 
     'requestError': function(rejection) { 
      // do something on error 
      return $q.reject(rejection); 
     }, 



     // optional method 
     'response': function(response) { 
      // do something on success 
      return response; 
     }, 

     // optional method 
     'responseError': function(rejection) { 
      // do something on error 
      return $q.reject(rejection); 
     } 
     }; 
    }); 

    $httpProvider.interceptors.push('myHttpInterceptor');