angularjs disable button on $http/$q calls

Question

following the DRY principal, i want to write a button directive which keeps button disabled for the duration of $http class.

I want to do this so as to forbid user from clicking the buttons multiple times, but i am not able to think on how to get function promise status inside a directive, given that the function resides on $scope

the scenario is very generic, buttons ng-click does call a function which in turn makes $http calls. on user click : button should get disabled and should be enabled only after the $http call is resolved, either success or failure.

Answer 1

Why not just make it easier.

<button ng-click="save()" ng-disabled="isProcessing">Save</button>


$scope.save = function(){
  $scope.isProcessing = true;
  $http.post('Api/Controller/Save', data).success(
    $scope.isProcessing = false;
  );
}

Sure it's the case if you need this logic in very few places across your app.

If you have such logic repeating many times (and if you are not lazy :) ), so in order to follow SOLID principles it definetely better to wrap this functionality into directive (check out other answers for this question to see examples of such directive).

Answer 2

This directive will disable the button until the save/promises is not fulfilled. single-click must return promises otherwise it will not disable the button.

In case there is no promises but still want to disable the button, then it is recommended to write own logic of disabling the button

app.directive('singleClick', function ($parse) {
    return {
        compile: function ($element, attr) {
            var handler = $parse(attr.singleClick);
            return function (scope, element, attr) {
                element.on('click', function (event) {
                    scope.$apply(function () {
                        var promise = handler(scope, { $event: event }); /// calls and execute the function specified in attrs.
                        if (promise && angular.isFunction(promise.finally)) { /// will execute only if it returns any kind of promises.
                            element.attr('disabled', true);
                            promise.finally(function () {
                                element.attr('disabled', false);
                            });
                        }
                    });
                });
            };
        }
    };
});

Answer 3

I like @codef0rmer 's solution because it is centralized--that is there's no additional code needed for each HTTP request, and you just need to check the global progress flag in your HTML. However, using transformResponse to determine when the request has completed is unreliable because the server may not return anything; in that case the handler isn't called and progress is never set back to false. Also, as written that answer doesn't account for multiple simultaneous requests (progress may return false before all requests have completed).

I've come up a similar solution which uses interceptors to address these issues. You can put it in your Angular app's config function:

.config(function ($httpProvider) {
    $httpProvider.interceptors.push(function($q, $rootScope) {
        var numberOfHttpRequests = 0;
        return {
            request: function (config) {
                numberOfHttpRequests += 1;
                $rootScope.waitingForHttp = true;
                return config;
            },
            requestError: function (error) {
                numberOfHttpRequests -= 1;
                $rootScope.waitingForHttp = (numberOfHttpRequests !== 0);
                return $q.reject(error);
            },
            response: function (response) {
                numberOfHttpRequests -= 1;
                $rootScope.waitingForHttp = (numberOfHttpRequests !== 0);
                return response;
            },
            responseError: function (error) {
                numberOfHttpRequests -= 1;
                $rootScope.waitingForHttp = (numberOfHttpRequests !== 0);
                return $q.reject(error);
            }
        };
    });
})

Now you can just use the waitingForHttp to disable buttons (or show a "busy" page). Using interceptors gives an added bonus that now you can use the error functions to log all HTTP errors in one place if you want.

Answer 4

I was trying different approaches including directives and came up with a simple filter that transforms promise to status object. You can then use the status object to disable related button (or anything else) as well as show some progress messages. So the filter code is:

function promiseStatus() {
  return function(promise) {
    var status = {
      inProgress: true,
      resolved: false,
      rejected: false
    };
    promise
      .then(function() {
        status.resolved = true;
      })
      .catch(function() {
        status.rejected = true;
      })
      .finally(function() {
        status.inProgress = false;
      });
    return status;
  }
}

Suppose you have controller like this

function SubmitController($http) {
  var vm = this;

  vm.submitData = function() {
    return $http.post('....')
      .then(function() {
        //Doing something usefull
      });
  }
}

Then the template will be like this

<button 
  ng-disabled='status.inProgress' 
  ng-click='status = (vm.submitData() | promiseStatus)'>Submit</button>
<span class='ng-hide' ng-show='status.inProgress'>Submitting...</span>
<span class='ng-hide' ng-show='status.resolved'>Submitted succsssfully!</span>
<span class='ng-hide' ng-show='status.rejected'>Failed to submit!</span>

Full source code is on a Github

Answer 5

You can create a directive that could be used on the element you want disabled.

 var loadingDisabled = function ($http) {
    return {
      restrict: "a",
      link: function (scope, elem, attr) {
                scope.isLoading = function () {
                    return $http.pendingRequests.length > 0;
                }
                scope.$watch(scope.isLoading, function(v) {
                    if (v) {
                        elem.disabled = true;
                    } else {
                        elem.disabled = false;
                    }
                });

            }

    };
  };

Answer 6

I've prepared directive on plnkr which overrides default ngClick directive

<button ng-click="loadData($notify)">submit</button>

and controller:

$scope.loadData = function($notify) {
    $timeout(function() {
      $notify && $notify();
    }, 1000);
  }

Answer 7

You could also consider setting a flag, and using the html tag fieldset and ng-disabled. Then you can control how long the yourDisableFlag is true based on $http calls, a $timeout, etc.

<form name="myForm">
  <fieldset ng-disabled="yourDisableFlag">
    <button id="b1" ng-click="b1function">B1</button>
    <button id="b2" ng-click="b2function">B2</button>
    <button id="b3" ng-click="b3function">B3</button>
  </fieldset>
</form>

Answer 8

Although I would be careful of over-engineering, a way to do this would be by using a custom directive. This directive

• Accepts an option, passed by attribute, of a function in the scope that must return a promise
• On click of the button, calls this function, and disables the button
• On finally of the promise, it re-enables the button

-

app.directive('clickAndDisable', function() {
  return {
    scope: {
      clickAndDisable: '&'
    },
    link: function(scope, iElement, iAttrs) {
      iElement.bind('click', function() {
        iElement.prop('disabled',true);
        scope.clickAndDisable().finally(function() {
          iElement.prop('disabled',false);
        })
      });
    }
  };
});

This can be used on a button as follows:

<button click-and-disable="functionThatReturnsPromise()">Click me</button>

You can see this in action at http://plnkr.co/edit/YsDVTlQ8TUxbKAEYNw7L?p=preview , where the function that returns the promise is:

$scope.functionThatReturnsPromise = function() {
  return $timeout(angular.noop, 1000);
} 

But you could replace $timeout with a call to $http, or a function from any service that returns a promise.

Answer 9

You can use this in the run block. This will make sure all the buttons will be disabled whenever there is an active XHR call.

myApp.run(function($rootScope, $http) {
    $http.defaults.transformRequest.push(function (data) {
        $rootScope.progress = true;
        return data;
    });
    $http.defaults.transformResponse.push(function(data){ 
        $rootScope.progress = false;
        return data;
    }) 
});

And then use the same model anywhere you want.

 <button ng-click="save()" ng-disabled="progress">Save</button>