ajax加载动画指令

来源：互联网发布：java教程入门视频编辑：程序博客网时间：2024/05/17 08:35

//html部分

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<meta http-equiv="Cache-Control" content="no-cache">
<title>ajaxLoading</title>
</head>
<style>

</style>
<body ng-app="myApp" ng-controller="MyController">
<loading></loading>
<script src="./js/jquery.js"></script>
<script src="./js/angular.js"></script>
<script src="./js/service.js"></script>
<script src="./js/app.js"></script>
<script src="./js/controller.js"></script>
</body>
</html>

//app.js需要依赖ajaxLoading模块

var app = angular.module('myApp',['ajaxLoading']);

//功能代码

/**
* 拦截器全局$http注入loading效果
*/
angular.module('ajaxLoading', [])
.config(function($httpProvider) {
$httpProvider.interceptors.push('loadingInterceptor');
})
.directive('loading', function() {
return {
replace: true,
restrict: 'AE',
template:'<div class="back-layer"><div class="loading">'
+'<img src="js/729.GIF">'
+'</div></div>',
link: function($scope, $element, attrs) {
var top = $(window).height()/2 - 25;
var left = $(window).width()/2 - 25;
$('.loading img').css({
height:'50px',
width:'50px'
})
$('.loading').css({
position:'fixed',
top: top,
left: left
});
}
};
})
.factory('loadingInterceptor', function($q, $rootScope) {
return {
request: function(config) {
$(".back-layer").show();
return config || $q.when(config);
},
response: function(response) {
$(".back-layer").hide();
return response || $q.when(response);
},
responseError: function(rejection) {
$(".back-layer").hide();
return $q.reject(rejection);
}
};
});

//一个ajax请求用作测试

app.controller('MyController',['$scope','$http',function($scope,$http){
$http({
method:'JSONP',
url:'https://api.github.com/user/'+1+'/'+'events'+'?callback=JSON_CALLBACK'
}).success(function(data){
console.log(data);
})
}])

云盘
http://pan.baidu.com/s/1cDkE7s

0 0