I am creating an app that pulls articles in from a joomla k2 powered website and I have run into a snag regarding $ionicLoading and “pull to refresh”. I implemented loading so that the user doesnt just stare at a blank screen while the articles are being pulled into the app. This triggers an overlay with a spinner which is perfect. then once the articles are loaded I am caching them to prevent any more unnecessary calls to the joomla site and just using pull to refresh to update the newest articles. When i pull to refresh it shows the loading icon specific to that function I.E. the loading spinner at the top of the page as well as the $ionicLoading spinner in the middle of the page giving me 2 spinners going at once. Is there any fix for this? I cant seem to find anything on it. Here is my controller for articles:
.controller('ArticleCtrl', function ($scope, $stateParams, $timeout, _, Articles) {
$scope.numberOfItemsToDisplay = 5;
$scope.articles = [];
Articles.all().then(function (response){
$scope.articles = response;
window.localStorage.setItem("articles", JSON.stringify(response));
},
function (err) {
if(window.localStorage.getItem("articles") !== undefined) {
$scope.articles = JSON.parse(window.localStorage.getItem("articles"));
}
}
);
$scope.doRefresh = function() {
Articles.getNew().then(function (articles){
var loadedIds = _.pluck($scope.articles, 'id');
var newItems = _.reject(articles, function (item){
return _.contains(loadedIds, item.id);
});
$scope.articles = newItems.concat($scope.articles);
$scope.$broadcast('scroll.refreshComplete');
});
};
})
and the $ionicLoading located in my app.js:
.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
}
}
})
})
.run(function ($rootScope, $ionicLoading) {
$rootScope.$on('loading:show', function() {
$ionicLoading.show({template: '<ion-spinner icon="android"></ion-spinner>'})
})
$rootScope.$on('loading:hide', function() {
$ionicLoading.hide()
})
})