如何使用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;
    });
  }

您可以在此處找到完整的答案，並提供一個實時示例。