javascript - 在 Angular js 中强制单击

Question

我正在创建一个客户端并调用我的 API，但至少需要 2 秒才能响应，因此我希望该用户不能单击注册两次。

我正在将这个 fiddle 合并到我的 Controller 中。

https://jsfiddle.net/zsp7m155/

但是发生的情况是，第一个函数需要 2 秒来禁用按钮，然后启用按钮并向 API 发送请求。 我在这里做错了什么吗？

编写我的 Controller

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 时禁用该按钮，并在其解析时重新启用。你可以这样做:

<button id="register-btn" name="register-btn" class="btn btn-primary" ng-disabled="isRegistering" single-click="createClient()">{{ running ? 'Please wait...' : 'Register' }}</button>

在你的 Controller 中

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