How to disable a button until http request is loaded in AngularJS?

Question

If I update or submit a form, the button should be disabled until the http response has finished. In the same way, when a page is loading, the button should be disabled until the entire data is loaded from the server.

In my code, the button is not disabled. How would I go about implementing it?

index.jsp

<body ng-app="myApp" ng-controller="myCtrl">
  <button ng-click="save()" loading="Loading..." notloading="save" disableonrequest></button>
</body>

script.js

// the main (app) module
var myApp = angular.module("myApp", []);

// add a controller
myApp.controller("myCtrl", function($scope, $http, $timeout) {
  $scope.save = function() {

    // JUST FOR TESTING
    $http.pendingRequests.length = 1;
    $timeout(function() {
      $http.pendingRequests.length = 0;
    }, 1000);
  };
});

myApp.directive("disableonrequest", function($http) {
  return function(scope, element, attrs) {
    console.log(scope, element, attrs)
    scope.$watch(function() {
      return $http.pendingRequests.length > 0;
    }, function(request) {
      console.log(request);
      if (!request) {
    element.html("<span >" + attrs.notloading + "</span>");
      } else {
    element.html("<span >" + attrs.loading + "</span><i class='fa fa-spinner fa-spin'></i>");
      }
    });
  }
});

How can I disable the button until it has loaded or the request has started?

officert · Accepted Answer · 2016-01-23 13:58:06Z

4

You can do this without a directive. Take a look at this JsFiddle.

myApp.controller("myCtrl", function($scope, $http, $timeout) {
  $scope.loading = false;

  $scope.save = function() {
    $scope.loading = true;

    //do your ajax request here,
    //and in the callback set $scope.loading = false;

    $timeout(function() {
      $scope.loading = false;
    }, 1000);
  };
});

If you are using Boostrap here is a great directive

https://github.com/jeremypeters/ng-bs-animated-button

that will do this for you, and change button color and icons, etc....

Edit....

I've updated the Fiddle to actually disable your button.

<button ng-click="save()" ng-disabled="loading">
  <span ng-hide="loading">Do some AJAX</span>
  <span ng-show="loading"><i class="fa fa-refresh fa-spin"></i></span>
</button>

you can use the ng-disabled directive to disable the button when $scope.loading === true

edited Jan 23, 2016 at 13:58

answered Jan 23, 2016 at 13:46

officert

1,2329 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

symon kt1 Over a year ago

have any provision for disabling button inside that directive

GHB · Accepted Answer · 2016-01-23 13:45:43Z

0

use ng-disabled="someToggle" inside your button tag, and set the default value of $scope.someToggle=true. then after the $http response happens (like inside .success() ) set $scope.someToggle=false.

answered Jan 23, 2016 at 13:45

GHB

9476 silver badges13 bronze badges

6 Comments

symon kt1 Over a year ago

have any provision inside directive

symon kt1 Over a year ago

i just added element.attrs.('disabled',true); but its not working

GHB Over a year ago

i think it would be more fluent if you used this way, instead of writing a whole other directive. but that being said, is there a reason that you have to use your own directive?

symon kt1 Over a year ago

you just look at my directive

symon kt1 Over a year ago

Sir actually i need to include a disabled code inside that directive any way for using that

|

Collectives™ on Stack Overflow

How to disable a button until http request is loaded in AngularJS?

2 Answers 2

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related