current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite
1

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?

share|improve this question

2 Answers 2

up vote 3 down vote accepted

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>
share|improve this answer
    
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? –  Jordy Meow Oct 3 '13 at 5:15
1  
@JordyMeow you can post it as a next SO question, after you're accepting Mike's answer ;) –  Cherniv Oct 3 '13 at 5:48
    
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! –  TigrouMeow Oct 7 '13 at 1:46
up vote 0 down vote

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();
        }
    });
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.