Question

我有角度js项目有几个控制器，每个控制器我使用这么多api调用需要很长时间，所以我想在api调用时在每个页面加载旋转。

我想保留一个像

这样的rootcope变量

 $rootScope.showLoading=false;

当我从任何控制器（如

）创建此变量时

  $rootScope.showLoadin=true;

然后旋转应该来，当我把它弄错时，旋转应该消失。

如何实现它？

Answer 1

您可以为您的应用发出的每个http请求应用加载程序，跟踪活动和已解决请求的数量。因此，xhrCreations添加了每个请求1，并且xhrResolutions添加了每个已解决的1。

因此，如果活动请求的数量超过已解决，则将使用值true更新服务。然后，当没有请求处于活动状态时，将使用false更新服务。因此，将范围变量设置为false

，从而将加载程序隐藏在控制器中

core.factory('httpInterceptor', ['$q', 'globalStates', function ($q, globalStates) {

    var xhrCreations = 0,
            xhrResolutions = 0;

    function isLoading() {
        return xhrResolutions < xhrCreations;
    }

    return {
        request: function (req) {

            xhrCreations++;

            globalStates.set('isRequestActive', isLoading());

            return req;
        },
        requestError: function (err) {

            xhrResolutions++;

            globalStates.set('isRequestActive', isLoading());

            return $q.reject(err);
        },
        response: function (res) {

            xhrResolutions++;

            globalStates.set('isRequestActive', isLoading());

            return res;
        },
        responseError: function (err) {

            xhrResolutions++;

            globalStates.set('isRequestActive', isLoading());

            return $q.reject(err);
        }
    };
}]);

服务：

core.service('globalStates', [function() {

  var gs = this;

  var states = {};

  gs.set = function(k, v) {
    states[k] = v;
  };

  gs.get = function(k) {
    return k ? states[k] : states;
  };
}]);

然后，您可以通过核心控制器的观察程序访问服务中的值：

$scope.$watch(function() {
  return globalStates.get();
}, function(states) {
  $rootScope.showLoading = states.isLoading;
});

如何为每个控制器进行共同旋转？

1 个答案: