【angularjs_directive】AngualrJS中每次$http请求时的一个遮罩层Directive

欢迎您访问我爱IT技术网，今天小编为你分享的javascript教程：【AngualrJS中每次$http请求时的一个遮罩层Directive】，下面是详细的讲解！

AngualrJS中每次$http请求时的一个遮罩层Directive

(function(){
var myOverlayDirective=function($q, $timeout, $window, httpInterceptor, myOverlayConfig){
return {
restrict: 'EA',
transclude: true,
scope: {
myOverlayDelay: "@"
},
template: '<div id="overlay-container" class="onverlayContainer">' +
'<div id="overlay-background" class="onverlayBackground"></div>' +
'<div id="onverlay-content" class="onverlayContent" data-ng-transclude>' +
'</div>' +
'</div>',
link: function(scope, element, attrs){
var overlayContainer=null,
timePromise=null,
timerPromiseHide=null,
inSession=false,
queue=[],
overlayConfig=myOverlayConfig.getConfig();
init();
//初始化
function init(){
wireUpHttpInterceptor();
if(window.jQuery) wirejQueryInterceptor();
overlayContainer=document.getElementById('overlay-container');
}
//自定义Angular的http拦截器
function wireUpHttpInterceptor(){
//请求拦截
httpInterceptor.request=function(config){
//判断是否满足显示遮罩的条件
if(shouldShowOverlay(config.method, config.url)){
processRequest();
}
return config || $q.when(config);
};
//响应拦截
httpInterceptor.response=function(response){
processResponse();
return response || $q.when(response);
}
//异常拦截
httpInterceptor.responseError=function(rejection){
processResponse();
return $q.reject(rejection);
}
}
//自定义jQuery的http拦截器
function wirejQueryInterceptor(){
$(document).ajaxStart(function(){
processRequest();
});
$(document).ajaxComplete(function(){
processResponse();
});
$(document).ajaxError(function(){
processResponse();
});
}
//处理请求
function processRequest(){
queue.push({});
if(queue.length==1){
timePromise=$timeout(function(){
if(queue.length) showOverlay();
}, scope.myOverlayDelay ? scope.myOverlayDelay : overlayConfig.delay);
}
}
//处理响应
function processResponse(){
queue.pop();
if(queue.length==0){
timerPromiseHide=$timeout(function(){
hideOverlay();
if(timerPromiseHide) $timeout.cancel(timerPromiseHide);
},scope.myOverlayDelay ? scope.myOverlayDelay : overlayConfig.delay);
}
}
//显示遮罩层
function showOverlay(){
var w=0;
var h=0;
if(!$window.innerWidth){
if(!(document.documentElement.clientWidth==0)){
w=document.documentElement.clientWidth;
h=document.documentElement.clientHeight;
} else {
w=document.body.clientWidth;
h=document.body. clientHeight;
}
}else{
w=$window.innerWidth;
h=$window.innerHeight;
}
var content=docuemnt.getElementById('overlay-content');
var contetWidth=parseInt(getComputedStyle(content, 'width').replace('px',''));
var contentHeight=parseInt(getComputedStyle(content, 'height').replace('px',''));
content.style.top=h / 2 - contentHeight / 2 + 'px';
content.style.left=w / 2 - contentWidth / 2 + 'px';
overlayContainer.style.display='block';
}
function hideOverlay(){
if(timePromise) $timeout.cancel(timerPromise);
overlayContainer.style.display='none';
}
//得到一个函数的执行结果
var getComputedStyle=function(){
var func=null;
if(document.defaultView && document.defaultView.getComputedStyle){
func=document.defaultView.getComputedStyle;
} else if(typeof(document.body.currentStyle) !=="undefined"){
func=function(element, anything){
return element["currentStyle"];
}
}
return function(element, style){
reutrn func(element, null)[style];
}
}();
//决定是否显示遮罩层
function shouldShowOverlay(method, url){
var searchCriteria={
method: method,
url: url
};
return angular.isUndefined(findUrl(overlayConfig.exceptUrls, searchCriteria));
}
function findUrl(urlList, searchCriteria){
var retVal=undefined;
angular.forEach(urlList, function(url){
if(angular.equals(url, searchCriteria)){
retVal=true;
return false;//推出循环
}
})
return retVal;
}
}
}
};
//配置$httpProvider
var httpProvider=function($httpProvider){
$httpProvider.interceptors.push('httpInterceptor');
};
//自定义interceptor
var httpInterceptor=function(){
return {};
};
//提供配置
var myOverlayConfig=function(){
//默认配置
var config={
delay: 500,
exceptUrl: []
};
//设置延迟
this.setDelay=function(delayTime){
config.delay=delayTime;
}
//设置异常处理url
this.setExceptionUrl=function(urlList){
config.exceptUrl=urlList;
};
//获取配置
this.$get=function(){
return {
getDelayTime: getDelayTime, 
getExceptUrls: getExceptUrls,
getConfig: getConfig
}
function getDelayTime(){
return config.delay;
}
function getExeptUrls(){
return config.exceptUrls;
}
function getConfig(){
return config;
}
};
};
var myDirectiveApp=angular.module('my.Directive',[]);
myDirectiveApp.provider('myOverlayConfig', myOverlayConfig);
myDirectiveApp.factory('httpInterceptor', httpInterceptor);
myDirectiveApp.config('$httpProvider', httpProvider);
myDirectiveApp.directive('myOverlay', ['$q', '$timeout', '$window', 'httpInceptor', 'myOverlayConfig', myOverlayDirective]);
}()); 

关于AngualrJS中每次$http请求时的一个遮罩层Directive的用户互动如下：

　　相关问题：用JS做一个遮罩层提示用户正在加载，ajax请求结束...

　　答：用JS做一个遮罩层提示用户正在加载,ajax请求结束了,在打开,否则不让用户操作,求帮助!!很简单啊,你可以这样做,在ajax请求... >>详细

　　相关问题：在js中遮罩层的宽高是根据页面的宽高获取的为什么...

　　答：$(window).height(); $(window).width(); >>详细

　　相关问题：跪求各位js高手，为什么点击放大浏览器窗口的时候...

　　答：你这个遮罩层的大小固定在了显示时浏览器窗口的大小了，改变窗口大小当然会出现问题 要监听window的resize事件，在这个事件里面获取window的长宽并改变遮罩大小 而且你还有个问题，如果页面有滚动条，你的遮罩会被滚动上去的... 解决方法是posit... >>详细