Asynchronous request and loading button with AngularJS

Question

DOM manipulation within an Angular controller seems to be wrong. But this is not coming without a few headaches :)

I have a button, and on ng-click, it will perform an asynchronous request in the background. During the time of that asynchronous request I would like all the buttons (and maybe a few more elements on the page) to be disabled and the clicked button to have a loading icons playing.

What is the cleanest way of doing this?

Possible duplicate of Preventing / dealing with double button clicks in angular — Mati
– Mati, Commented Dec 4, 2016 at 15:12

Mike Robinson · Accepted Answer · 2013-10-03 04:42:17Z

8

I usually do this with a variable on the $scope called loading. Whenever an asynch operation is happening, just set it to true. Then anything that's need to be disabled or otherwise affected can base it's state off of that.

Here's a dummy control:

function TestCtrl($scope, $http) {
    $scope.loading = false;

    $scope.doASynch = function () {
        $scope.loading = true;
        $http.get("/url").success(function () {
            $scope.loading = false;
        });
    }
}

And here's a sample template.

<div ng-controller="TestCtrl">
    <a class="button" ng-disabled="loading" ng-click="doASynch()">
        <span ng-hide="loading">Click me!</span>
        <span ng-show="loading">Loading....</span>
    </a>
</div>

answered Oct 3, 2013 at 4:42

Mike Robinson

25.2k8 gold badges63 silver badges83 bronze badges

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

3 Comments

TigrouMeow Over a year ago

I had the same idea but I was a bit concerned on how to make it looks really nice. I think this is definitely the base for it, however I would like to add an animation, maybe to make the other buttons to fade. If I want to apply jQuery effects, how could I do? Do you have any idea?

Ivan Chernykh Over a year ago

@JordyMeow you can post it as a next SO question, after you're accepting Mike's answer ;)

TigrouMeow Over a year ago

Alright, I will post the question later :) I am trying to create a directive by myself now but I'd like to know how guys would do it too. Thanks!

James Morris · Accepted Answer · 2013-11-01 21:40:45Z

Here is exactly what you are looking for

Loading animations with Asynchronous HTTP Requests in Angular JS

    var app = angular.module('myapp', ["ui.utils", "ui.router"]);

    app.factory('iTunesData', function($http) {
       return {
            doSearch: function(sQuery) {
                 //return the promise directly.
                 return $http.jsonp('http://itunes.apple.com/search', {
                        params: {
                            "callback": "JSON_CALLBACK",
                            "term": sQuery
                        }
                    });
            }
       }
    });

    app.controller('iTunesSearch', function($scope, $location, $routeParams, iTunesData) {
        $scope.search = function() {
          iTunesData2.doSearch($scope.searchTerm)
            .then(function(result) {
                  $scope.data = result.data;
                  $location.path($scope.searchTerm);
              });
        }
        $scope.searchTerm = $location.$$path.split("/")[1];
        if($scope.searchTerm!="") {
          $scope.search();
        }
    });

Collectives™ on Stack Overflow

Asynchronous request and loading button with AngularJS

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related