[英]How to show and ajax loader gif using Angular js
I am currently using angular.js, and would like to know how to incorporate the $('#loading').show(); 我目前正在使用angular.js,想知道如何合并$('#loading')。show(); fimctopm onto my onclick function.
fimctopm到我的onclick函数上。
here is my html: 这是我的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: 被触发的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});;
}
}
]);
Also tried adding it with $scope('#loading').show(); 还尝试用$ scope('#loading')。show();添加它。
You can use a simple ng-show method for hiding an showing your ajax loader gif. 您可以使用简单的ng-show方法来隐藏显示ajax加载器gif的内容。
here's an example: 这是一个例子:
HTML: 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: 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 . 您可以在此处找到完整的答案,并提供一个实时示例。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.