<div data-my-overlay><br/><img src="spinner.gif" />   Loading</div> 

(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;}}}};//配置$httpProvidervar httpProvider = function($httpProvider){$httpProvider.interceptors.push('httpInterceptor');};//自定義interceptorvar httpInterceptor = function(){return {};};//提供配置var myOverlayConfig = function(){//默認配置var config = {delay: 500,exceptUrl: []};//設置延遲this.setDelay = function(delayTime){config.delay = delayTime;}//設置異常處理urlthis.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]);}()); 

(functioin(){angular.module('customersApp',['ngRoute', 'my.Directive']).config(['$routeProvider, 'myOverlayConfigProvider', funciton($routeProvider, myOverlayConfigProvider){...myOverlayConfigProvider.setDealy(100);myOverlayConfigProvider.setExceptionUrl({method: 'GET',url: ''});}]);}());