How to show and ajax loader gif using Angular js

Question

I am currently using angular.js, and would like to know how to incorporate the $('#loading').show(); fimctopm onto my onclick function.

here is my html:

<a class="btn-blue" value="submit" ng-click="initiatePurchase()">Upgrade Now</a>    

<div id="loading"><img src="images/ajax-loader.gif" alt="" /></div>

Angular.js function that gets triggered:

subscriptionControllers.controller('redirectController',['$scope','$location','$window',
function($scope,$location,$window){
    $scope.redirect = {};
    //lets leave all the query params in the redirect object
    //page can access anything it wants
    $scope.redirect = ($location.search());
    console.log('Loading redirect page ', $scope.redirect.state);
            //have tried adding $('#loading').show(); here but doesn't work
    if($scope.redirect.state =='success'){
        console.log('setting location to subscribed');
        $location.path('/subscribed');
    }else{
        $location.path('/error').search({code:$scope.redirect.state,message:$scope.redirect.error});;
    }
}
]);

Also tried adding it with $scope('#loading').show();

Answer 1

You can use a simple ng-show method for hiding an showing your ajax loader gif.

here's an example:

HTML:

<div ng-show="loading" class="loading"><img src="...">LOADING...</div>
<div ng-repeat="car in cars">
  <li>{{car.name}}</li>
</div>
<button ng-click="clickMe()" class="btn btn-primary">CLICK ME</button>

JS:

$scope.clickMe = function() {
    $scope.loading = true;
    $http.get('test.json')
      .success(function(data) {
        $scope.cars = data[0].cars;
        $scope.loading = false;
    });
  }

Full answer with a live example you can find here .