Skip to content

Instantly share code, notes, and snippets.

@thisboyiscrazy
Created March 11, 2013 21:10
Show Gist options
  • Save thisboyiscrazy/5137781 to your computer and use it in GitHub Desktop.
Save thisboyiscrazy/5137781 to your computer and use it in GitHub Desktop.
Angularjs button loading like twitter bootstraps e.g. <button btn-loading="something.busy" data-loading="I'm working on it...">Do It</button>
angular.module('ui.bootstrap.buttons', [])
.directive('btnLoading',function () {
return {
link:function (scope, element, attrs) {
scope.$watch(
function () {
return scope.$eval(attrs.btnLoading);
},
function (value) {
if(value) {
element.addClass("disabled").attr("disabled","disabled");
element.data('resetText', element.html());
element.html(element.data('loading'));
} else {
element.removeClass("disabled").removeAttr("disabled")
element.html(element.data('resetText'));
}
}
);
}
};
}
);
@j-walker23
Copy link

Thanks for this.
Can replace bottom else with below to work with ng-disabled correctly.
if (!scope.$eval(attrs.ngDisabled)) {
element.removeClass("disabled").removeAttr("disabled");
element.html(element.data('resetText'));
}

@marcalj
Copy link

marcalj commented May 31, 2013

I'm finally using this: (maintaining the same property as Twitter Bootstrap)
(also in buttons add the property in ng-disabled)

directive('btnLoading',function () {
        return {
            link:function (scope, element, attrs) {
                scope.$watch(
                    function () {
                        return scope.$eval(attrs.btnLoading);
                    },
                    function (value) {
                        if(value) {
                            if (!attrs.hasOwnProperty('ngDisabled')) {
                                element.addClass('disabled').attr('disabled', 'disabled');
                            }

                            element.data('resetText', element.html());
                            element.html(element.data('loading-text'));
                        } else {
                            if (!attrs.hasOwnProperty('ngDisabled')) {
                                element.removeClass('disabled').removeAttr('disabled');
                            }

                            element.html(element.data('resetText'));
                        }
                    }
                );
            }
        };
    })

@anil1712
Copy link

@marcalj, Its really nice example and working like a charm, I am using the loading button inside modal and the button gets disabled on click but the other form elements like other text boxes, dropdowns are active, so I want to disable that too, is there any solution for this.

@fbandrey
Copy link

Good job, @marcalj. Works perfect.

@dejanvasic85
Copy link

If you are already referencing the bootstrap library you can just simply call:

element.button('loading');

and

element.button('reset');

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment