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

Answer 1

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

Submit
Submitting...
Submitted succsssfully!
Failed to submit!

Full source code is on a Github