Функция, которая уже работает, не вызывать ее в следующий раз

Я работаю над 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 получить идентификатор единицы

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

2

Решение

Что вам нужно перехватчики метод $ httpProvider. Это дает вам полный контроль над любым http-вызовом в пределах Angular scope (методы 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');
2

Другие решения

Установить флаг var inProgress = true; перед вашим методом сообщения. Проверьте, установлен ли этот флаг перед публикацией. Установите флаг в false, когда метод post завершен (наконец).

Вы также можете использовать этот флаг, чтобы включить / отключить кнопку сохранения.

0