在角度js中強制單擊

Question

我正在創建一個客戶端並調用我的API，但它至少需要2秒才能響應，因此我希望該用戶無法單擊兩次註冊。

我將這個小提琴放入我的控制器中。

https://jsfiddle.net/zsp7m155/

但什麼情況是，第一個函數需要2秒鐘禁用按鈕之後，它能夠使他按鈕併發送請求給API。 我在這裏做錯了什麼？

代碼我我的控制器

CONTROLLER.JS

$scope.createClient = function() { 


     ClientService.createClient($scope.theClient).then(function (aCreateClientResponse) { 
      if(aCreateClientResponse[0] == $scope.RESPONSE_CODE.CM_SUCCESS) {     
       alert('success');    
      } 
      else if(aCreateClientResponse[0] == $scope.RESPONSE_CODE.CM_DOMAINNAME_ERROR) { 
       alert('Check your domain name');    
      } 
      else if(aCreateClientResponse[0] == $scope.RESPONSE_CODE.CM_INVALID_INPUT) { 

       alert('Invalid request');    
      } 
      else { 

       alert('Service is not available');   
      } 
     });   
}; 

代碼我服務的

SERVICE.JS

App.factory('ClientService', function($http, API_URL, REQUEST_HEADER, RESPONSE_CODE) { 

     createClient: function(aClient) {  

     var myCreateClientRequest = { 
      "CreateClientRequest": { 
       "Header": { 
        "CMMHeader": { 
         "Id": uuid2.newuuid() 
        } 
       }, 
       "Client": { 
        "OrganizationName": aClient.Name, 
        "OrganizationDomain": aClient.Domain, 
       }, 
      } 
     }; 

     //API Call 
     var promise = $http.post(API_URL.CREATE_CLIENT, myCreateClientRequest, REQUEST_HEADER).then(
     function(aCreateClientResponse) { //Success Callback 

      return [aCreateClientResponse.data.CreateClientResponse.Result.ResponseCode,'']; 
     }, 
     function(aCreateClientResponse) { //Error Callback 

      return [aCreateClientResponse.status,'']; 
     }); 

     return promise; 
    }, 

       }); 

HTML

<button id="register-btn" name="register-btn" class="btn btn-primary" ng-disabled="((Client.User.UserPassword !== Client.User.UserconfirmPassword) || CreateClientForm.domain.$invalid || CreateClientForm.username.$invalid || CreateClientForm.email.$invalid || CreateClientForm.password.$invalid || CreateClientForm.confirmpassword .$invalid || CreateClientForm.organizationname.$invalid)" single-click="createClient()">{{ running ? 'Please wait...' : 'Register' }}</button> 

Answer 1

你有幾個選項，最簡單的就是，當你打電話給你的API，當它解決了重新啓用禁用按鈕。你可以做這樣的：

$scope.isRegistering = false; 

$scope.createClient = function() { 

    $scope.isRegistering = true; 
    return $timeout(function() { 
     ClientService.createClient($scope.theClient).then(function (aCreateClientResponse) { 
      $scope.isRegistering = false; 
      if(aCreateClientResponse[0] == $scope.RESPONSE_CODE.CM_SUCCESS) {     
       alert('success');    
      } 
      else if(aCreateClientResponse[0] == $scope.RESPONSE_CODE.CM_DOMAINNAME_ERROR) { 
       alert('Check your domain name');    
      } 
      else if(aCreateClientResponse[0] == $scope.RESPONSE_CODE.CM_INVALID_INPUT) { 

       alert('Invalid request');    
      } 
      else { 

       alert('Service is not available');   
      } 
     }, function(){ 
      $scope.isRegistering = false; 
     });   
    }, 1000); 
};