AngularJS - Button loading directive

directive.js

/*
	``btn-loading`` attribute.

	This attribute will update the button state using Twitter Bootstrap button plugin and
	according the attribute value.

	The attribute value should be a scope variable.
	If the variable is ``true`` the button will have the ``loading`` state.
	If the variable is ``false`` the button will be reset and displayed normaly.

        Usage:
            <button class="btn" btn-loading="is_loading" data-loading-text="Save in progess ..">Save</button>

*/
app.directive("btnLoading", function(){
	return function(scope, element, attrs){
		scope.$watch(function(){ return scope.$eval(attrs.btnLoading); }, function(loading){
			if(loading) return element.button("loading");
			element.button("reset");
		});
	}
});

I edited this code to watch for changes in form's ng-disabled state to not interfere with the btn loading, otherwise the button is enabled and the ng-disabled state is ignored.

..directive("btnLoading", function() {
return function(scope, element, attrs) {
scope.$watch(function() {
return scope.$eval(attrs.ngDisabled);
}, function(newVal) {
//you can make the following line more robust
if (newVal) {
return;
} else {
return scope.$watch(function() {
return scope.$eval(attrs.btnLoading);
},
function(loading) {
if (loading)
return element.button("loading");
element.button("reset");
});
}
});
};
})

drrddd

ddfff

Sorry. Cool

Thanks