How to disable buttons until http request is processed/loaded in AngularJS?

Question

I want to write a directive that keeps a button and page disabled for the duration of the http request.

If I update or submit a form, the button will disable until the http response is complete.
When a page is loading, it will disable until the entire data is loaded from the server.
After 10 seconds, the button will be active and the user can click multiple times.

app.js

<script>
var angModule = angular.module("myApp", []);

angModule.controller("myCtrl", function ($scope, $timeout) {
    $scope.isSaving = undefined;
    $scope.btnVal = 'Yes';
    $scope.save = function()
    {
    $scope.isSaving = true;

    $timeout( function()
    {
        $scope.isSaving = false;

    }, 1000);
    };
});
</script>

index.html

<div ng-app="myApp">
    <ng-form ng-controller="myCtrl">
    Saving: {{isSaving}}             

        <button ng-click="save()" ng-disabled="isSaving">
    <span ng-hide="isSaving">Save</span>
    <span ng-show="isSaving">Loading...</span><i class="fa fa-spinner fa-spin" ng-show="isSaving"></i>
      </button>


    </ng-form>
</div>

I am new to AngularJS, please help me write a directive for this.

You can find very useful information of how to create a custom directive here — Filipe
– Filipe, Commented Jan 20, 2016 at 15:53

Vanojx1 · Accepted Answer · 2016-01-22 08:17:11Z

2

here a basic example :

<button ng-click="save()" loading="Loading..." notloading="save" disableonrequest>

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

A WORKING EXAMPLE

edited Jan 22, 2016 at 8:17

answered Jan 20, 2016 at 16:13

Vanojx1

5,5842 gold badges25 silver badges37 bronze badges

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

11 Comments

Symon Kt Over a year ago

Thankyou Vanojx1 the problem is how it become a reusable code it will applied only Button name as Save and while processing it will Loading..

Symon Kt Over a year ago

Thank you Vanojx1 the problem is how it become a reusable code, it will applied only button name as Save and while processing it will Loading..I want to use many places in the same.but button name is changed before and after request For example i need to my button name as Login and while processing it will changed to Processing.. instead of Loading..

Symon Kt Over a year ago

Dear Vajonx one problem is here the button text shows undefined why?

Symon Kt Over a year ago

First of all thank you for responding my comments.Actually i am using <button type="button" class="btn btn-primary btn-block" ng-click="updateProduct()" loading="Loading..." notloading="Update Product" disableonrequest></button> But it will shows up as undefined as button text it will not showing Update Product before processing and Loading while processsing.But any way working fine

Vanojx1 Over a year ago

Im not here to code for you, i provided you a starting point for create what you need, then try to learn "how to" by yourself

|

Raphi · Accepted Answer · 2016-01-20 16:17:46Z

0

Depending on your needs, you may not necessarily need a custom directive for this simple task.

You can simply set the $scope.isSaving property inside the callback for $http.

For example

$http({
        url: 'http://path/to/the/api/',
        method: 'GET',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
        }
    })
   .success(function(data, status){
        $scope.isSaving = false;
    })
   .error(....);

answered Jan 20, 2016 at 16:17

Raphi

4283 silver badges5 bronze badges

Collectives™ on Stack Overflow

How to disable buttons until http request is processed/loaded in AngularJS?

2 Answers 2

11 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related