1

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();

meztli
  • 449
  • 2
  • 9
  • 20

1 Answers1

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.

Community
  • 1
  • 1
Alex Choroshin
  • 6,177
  • 2
  • 28
  • 36
  • ok, but I can't have two functions happening on ng-click right? this needs to happen in the function I already have – meztli Apr 08 '14 at 23:19
  • Ok but you do know when your view is in the loading stage so you can easily set the scope.loading to true or when the view is loaded just set scope.loading to false and you wont see the image – Alex Choroshin Apr 08 '14 at 23:43