相关疑难解决方法(0)

Ok i have tons of $http() calls all around the app code,

i'm wondering is there any way / best practice to detect when all $http() around the app have finished ( success/error donesn't matter what they return, just need to know if finished )?

So that i can show a loading gif until they are loading ?

thanks

我按照这篇文章在项目上实现了类似的ajax loader映像:

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

我的实现有一些不同之处:

• 我用的$rootScope到emit,而不是broadcast和我也用$rootScope的指令来处理该事件.
• 由于项目的特殊性,我必须$rootScope.$on在事件处理程序内第一个被触发的事件(显示或隐藏)之后解除指令侦听器的绑定.
• 我只发射一个显示/隐藏事件.在第一个HTTP请求上显示,在计数达到0时隐藏.

我认为这些是与链接帖子的主要区别,不确定它们是否与我的问题相关,但以防它们是......

处理加载程序隐藏事件时,加载程序已经消失,除非刷新页面,否则我不会再显示它,但我仍然有后台http请求刷新当前页面上的数据.这些请求仍然会被截获并触发新的显示/隐藏事件,这些事件不再需要/处理.我只需要第一次秀和第一次隐藏,就是这样.

什么是删除我$httpProvider在第一个隐藏事件被触发后添加到的HTTP拦截器的正确方法？

我知道我们使用a添加了拦截器,$httpProvider.interceptors.push()但是当我不再需要拦截器时,我不知道如何将其弹出.

我想在我的应用程序的第一次加载时显示一个微调器:https://devart.withgoogle.com/

我试图通过服务模块这样做:

angular.module('InitialLoad', [])
    .config(function ($httpProvider) {
        $httpProvider.responseInterceptors.push('myHttpInterceptor');
        var spinnerFunction = function (data, headersGetter) {
            $('#loading').fadeIn();
            return data;
        };
        $httpProvider.defaults.transformRequest.push(spinnerFunction);
    })
    .factory('myHttpInterceptor', function ($q, $window) {
        return function (promise) {
            return promise.then(function (response) {
                $('#loading').fadeOut(function(){
                    $(this).remove();
                });
                return response;
            }, function (response) {
               $('#loading').fadeOut(function(){
                    $(this).remove();
                });
                return $q.reject(response);
            });
        };
    });

但是这有很多问题......首先是它不会监听它收听每个请求的第一个负载.它也没有显示和隐藏加载,就像在DevArt上完成它一样优雅,我使用jQuery来隐藏和显示加载微调器,而不是使用Angular Animate.

有人可以帮忙吗？澄清这是INITIAL app加载!而不是在后续请求中显示微调器.我使用它:https://github.com/chieffancypants/angular-loading-bar但我想展示应用程序启动的不同之处.

我希望能够设置一个AngularJS http拦截器,它将设置$rootScope.loading为true或false取决于当前是否正在进行AJAX请求.

到目前为止,我已将以下内容放在一起:

angular.module('myApp')
.config(function ($httpProvider) {
  $httpProvider.responseInterceptors.push('loadingInterceptor');

  var loadingFunction = function (data, headersGetter) {
      $rootScope.loading = true

      return data;
  };
  $httpProvider.defaults.transformRequest.push(loadingFunction);
})
.factory('loadingInterceptor', function ($q, $window, $rootScope) {
    return function (promise) {
        return promise.then(function (response) {
            $rootScope.loading = false;
            return response;

        }, function (response) {
            $rootScope.loading = false;
            return $q.reject(response);
        });
    };
});

但是我无法注入$rootScope配置块,所以$rootScope.loading当HTTP请求开始时我无法设置变量.

我在这里错过了什么吗？我该怎么做？

我正在尝试创建一个简单的加载器.以下是我到目前为止所做的工作.有人可以看看,让我知道我哪里出错了吗？

似乎loading style-2没有添加CSS样式.我的DOM只显示:

<span class=""></span>

我的指示:

angular.module('loaderModule', [
    'restangular',
])

.controller('appLoaderController', ['$scope', function ($scope) {
    $scope.$on('LOAD', function () {
        $scope.loading = "loading style-2"
    });
    $scope.$on('UNLOAD', function () {
        $scope.loading = ""
    });
}])

.directive('spinLoader', function() {
    return {
        restrict: 'E',
        transclude: true,
        template: '<span class="{{ loading }}"></span><div ng-transclude ></div>'
    };
});

HTML:

<spin-loader>
    <div ui-view></div>
</spin-loader>

然后我通过调用它来使用它: $scope.$emit('LOAD')