Question

我目前正在使用angular.js，并且想知道如何合并$（＆＃39; #loading＆＃39;）。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添加它（＆＃39; #loading＆＃39;）。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;
    });
  }

您可以找到here的实时示例的完整答案。

如何使用Angular js显示和ajax loader gif

1 个答案: