directive for disabling a button when ng-click is calling to an async function

[Jakub Arnold]

I have a button that does some async request, such as <button ng-click="loadStuff()">Load stuff</button> where the fuction might look something like this

$scope.loadStuff = function() {

   $http("/foo").success(function(response) {

      // some stuff

   });

}

And I want my button to show "loading" text and be disabled while the request is in progress ... but I don't know how can I access it. In pseudocode it would be something like

$scope.loadStuff = function() {

   button = getTehButtonSomehow();

   

   // in twitter bootstrap speak this is soemthing like .text("loading").prop("disabled", "disabled")

   button.button("loading") ;

   $http("/foo").success(function(response) {

      // some stuff

      // restore the original state

      button.button("reset");

   }).failure(function() { 

      button.button("reset");

   });

}

Would it be possible to have a directive that would do this by just adding a "loading" attribute to the button? 

Like <button ng-click="loadStuff()" loading-text="loading some stuff ...">Load stuff</button> which would automatically handle the state changes.

[Peter Bacon Darwin]

You can do it without a directive like this:  http://plunker.no.de/edit/zWQxjv?live=preview 

It would be nice to encapsulate this into a directive but would require more than 5 minutes work.

Pete

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en.
 
 

[Peter Bacon Darwin]

You can do it without a directive like this:  http://plunker.no.de/edit/zWQxjv?live=preview 

It would be nice to encapsulate this into a directive but would require more than 5 minutes work.

Pete

[Jakub Arnold]

Thanks for the response :) but I still don't understand how to use this in a directive

Pete

To unsubscribe from this group, send email to angular+unsubscribe@googlegroups.com.

[Andy Joslin]

Here's an attempt at a directive: http://plnkr.co/edit/lvu0yO

[chris...@gmail.com]

Without using a directive, you could just create a CSS for disabled state and do ng-class="{'disabled': loading}"

Chris.

[max.myk...@gmail.com]

Maybe I can get access to global http queue list or something like that? Use model variables it's not perfect variant.

[digger69]

$http.pendingRequests ? I'll give it a go - however, a bit worried that the docs warn that this is for debugging only. Anyone solve this in a directive yet?

Thanks,

Mark

[dav...@gmail.com]

On Wednesday, August 1, 2012 2:34:34 PM UTC-7, chris...@gmail.com wrote:

Without using a directive, you could just create a CSS for disabled state and do ng-class="{'disabled': loading}"

This.  Much simpler.  I've written a directive for this and it ended up being more trouble than it's worth, because every async situation is just a little bit different.  Easier to say $scope.loading=true in your controller than to maintain basically 4-way communication between your view, controller, directive, and async action, and while every async action ends up being just different enough to be a pain.  (Although I'd use ng-disabled="loading" instead of ng-class for a button.) 

[digger69]

I hear you - but it seems you end up with the same logic in every controller (or 98% similar). I'll give this a go - found this SO article that got me going w/ a directive based on pendingRequests 
http://stackoverflow.com/questions/11786764/track-to-see-when-a-view-changes-in-angularjs