如何使用Angular js显示和ajax加载器gif

Question

我目前正在使用angular.js，想知道如何合并$（'＃loading'）。show（）; fimctopm到我的onclick函数上。

这是我的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函数：

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});;
    }
}
]);

还尝试用$ scope（'＃loading'）。show（）;添加它。

Answer 1

您可以使用简单的ng-show方法来隐藏显示ajax加载器gif的内容。

这是一个例子：

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

您可以在此处找到完整的答案，并提供一个实时示例。