Reputation: 9247
I have menu where on click loads different views in <div data-ui-view></div>
.Problem is that i want to load spinner inside that ui-view where i render different views but i dont know how.Any suggestion?
<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>`
Upvotes: 0
Views: 78
Reputation: 11930
This should work very nice
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()
})
});
Read more here
Also there is another great plugin angular-loading-bar.
Upvotes: 1