使用httpInterceptor和AngularJS 1.1.5实现加载旋转器

发布时间：2020-12-17 10:27:19 所属栏目：安全来源：网络整理

导读：我找到一个加载微调的例子在这里http /资源调用SO： Set rootScope variable on httpIntercept(Plunker：http://plnkr.co/edit/32Mh9UOS3Z4vnOtrH9aR?p=preview) 正如你可以看到的实现工作(使用AngularJS 1.0.5)。但是，如果您更改源为AngularJS 1.1.5。该示

我找到一个加载微调的例子在这里http /资源调用SO：

> Set rootScope variable on httpIntercept(Plunker：http://plnkr.co/edit/32Mh9UOS3Z4vnOtrH9aR?p=preview)

正如你可以看到的实现工作(使用AngularJS 1.0.5)。但是，如果您更改源为AngularJS 1.1.5。该示例不工作了。

我学到了$ httpProvider.responseInterceptors在1.1.5中已弃用。
相反，应该使用$ httpProvider.interceptors

不幸的是，只是替换上面的字符串在Plunker没有解决问题。有没有人曾经使用AngularJS 1.1.5中的HttpInterceptor这样的负载旋转器？

谢谢你的帮助！

迈克尔

感谢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; /* -1 * image width / 2 */
   margin-top: -32px; /* -1 * image height / 2 */
   display: block;
}

HTML：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!