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

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