栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

使用httpInterceptor和AngularJS 1.1.5实现加载微调器

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

使用httpInterceptor和AngularJS 1.1.5实现加载微调器

感谢Steve的提示,我得以实现加载程序:

拦截器:

.factory('httpInterceptor', function ($q, $rootScope, $log) {    var numLoadings = 0;    return {        request: function (config) { numLoadings++; // Show loader $rootScope.$broadcast("loader_show"); return config || $q.when(config)        },        response: function (response) { if ((--numLoadings) === 0) {     // Hide loader     $rootScope.$broadcast("loader_hide"); } return response || $q.when(response);        },        responseError: function (response) { if (!(--numLoadings)) {     // Hide loader     $rootScope.$broadcast("loader_hide"); } return $q.reject(response);        }    };}).config(function ($httpProvider) {    $httpProvider.interceptors.push('httpInterceptor');});

指示:

.directive("loader", function ($rootScope) {    return function ($scope, element, attrs) {        $scope.$on("loader_show", function () { return element.show();        });        return $scope.$on("loader_hide", function () { return element.hide();        });    };})

CSS:

#loaderDiv {   position: fixed;   top: 0;   right: 0;   bottom: 0;   left: 0;   z-index: 1100;   background-color: white;   opacity: .6;}.ajax-loader {   position: absolute;   left: 50%;   top: 50%;   margin-left: -32px;    margin-top: -32px;    display: block;}

HTML:

<div id="loaderDiv" loader>    <img src="src/assets/img/ajax_loader.gif" /></div>


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/387467.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号