javascript - $ionicLoading 与 Angular UI Router 解析

Question

我正在尝试使用 $ionicLoading与 Angular UI Router resolves .这个想法是，当请求新的路线/状态时，加载模式会在解析数据时出现，然后在解析完成并实例化新状态时消失。

路由器

.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
    }
  }
})

运行 block

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

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

这在不使用解析时效果很好。但是当解决工作时，加载屏幕不再出现。

如果存在解析，我尝试在 $stateChangeStart 上广播 loading:show，但这也不起作用。

是否有其他拦截器或状态更改事件我应该广播 loading:show 和 loading:hide 以使 $ionicLoading 可以使用解决？

Answer 1

我最近遇到了这个问题，这在运行 block 中对我有用:

$rootScope.$on('loading:show', function () {
    $ionicLoading.show({
        template:'Please wait..'
    })
});

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

$rootScope.$on('$stateChangeStart', function () {
    console.log('please wait...');
    $rootScope.$broadcast('loading:show');
});

$rootScope.$on('$stateChangeSuccess', function () {
    console.log('done');
    $rootScope.$broadcast('loading:hide');
});

我在 Ionic 论坛上找到了它 here