$ angularLoading与Angular UI Router解析

Question

我正在尝试使用$ ionicLoading和Angular UI Router解析.我们的想法是,当请求新的路由/状态时,在解析数据时出现加载模式,然后在解析完成并实例化新状态时消失.

路由器

.state('tab.locations', {
  url: '/locations',
  cache: false,
  views: {
    'locations-tab': {
      templateUrl: 'js/locations/tab-locations.html',
      controller: 'LocationsCtrl as vm'
    }
  },
  resolve: {
    locationsResource: 'Locations',
    locations: function(locationsResource) {
      return locationsResource.all();
    }
  }
})

如果没有解决方案,一种推荐的方法是使用$httpProvider.interceptors广播事件来显示和隐藏加载屏幕.像这样:

$ ionicConfigProvider

$httpProvider.interceptors.push(function($rootScope) {
  return {
    request: function(config) {
      $rootScope.$broadcast('loading:show');
      return config
    },
    response: function(response) {
      $rootScope.$broadcast('loading:hide');
      return response
    }
  }
})

runBlock

$rootScope.$on('loading:show', function() {
  $ionicLoading.show({template: '<ion-spinner></ion-spinner>'})
});

$rootScope.$on('loading:hide', function() {
  $ionicLoading.hide()
});

不使用结算时,这很有用.但是当解析工作时,加载屏幕不再出现.

我试过广播loading:show,$stateChangeStart如果有一个决心,但也不起作用.

是否有其他拦截器或状态变化事件我应该广播loading:show并与解决方案loading:hide一起$ionicLoading工作？

Answer 1

即使我也有同样的问题。它对于简单的 HTTP 请求非常有效，但是当您开始使用状态解析时，它就不能开箱即用了。
您可以使用一个简单的模块，该模块可以拦截所有 $http 请求，效果很好。
https://github.com/chieffancypants/angular-loading-bar这会引发一些您可以在$rootScope.$on
上使用的事件。

cfpLoadingBar:started在第一个 XHR 请求时触发一次。如果在 cfpLoadingBar:completed 触发后另一个请求发出，将再次触发。

cfpLoadingBar:completed当所有 XHR 请求返回（无论成功与否）时触发一次

对于仍在与这个问题作斗争的人:)