如何在ui-view中添加微调器？

Question

我有菜单，点击加载<div data-ui-view></div>中的不同视图。问题是我想在ui-view中加载微调器，我在那里渲染不同的视图，但我不知道如何。任何建议？

        <div ng-show="true">
            <div class='loading-sub-indicator'>
                <div class='loading-indicator-body'>
                </div>
            </div>
            <div class='loading-sub-indicator-overlay'>
                <div class='loading-indicator-body'>
                    <div class='spinner' ng-show="true">
                        <div class="vertical-align-center horizontal-align-stretch">
                            <div class="ticket-validation-container-no-buttons">
                                <div> <three-bounce-spinner></three-bounce-spinner> </div>
                                <div class="ticket-validation-container-text">@Translator.Translate("GETTING_REPORT")</div>
                                <div class="ticket-validation-container-text">@Translator.Translate("PLEASE_WAIT")</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>`

Answer 1

这应该非常好用

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

app.run(function($rootScope, $ionicLoading) {
  $rootScope.$on('loading:show', function() {
    $ionicLoading.show({template: 'foo'})
  })

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

了解更多here
另外还有一个很棒的插件angular-loading-bar。