How do I hide a loading dialog for http.get using ionic.service.loading once complete?

ionic-v1
1

My app pulls in data, but it takes a sec (sometimes 2) for the data to pop into the view. So I need a loading icon. Easy enough. But hiding it is my issue.

My .service pulls some data down via $http.get (using .then) and my .controller currently looks like the following:

.controller('myctrl', function($scope, $ionicLoading, myservice) {
    $scope.loading = $ionicLoading.show({
      content: 'Loading...',
      showBackdrop: false
    });
    $scope.shops = myservice.all();
    //$scope.loading.hide(); //i need this to fire after the data is loaded.
})

How do I figure out when the data is complete in order to hide the loading? This example is close to my service http://plnkr.co/edit/5l1u90AVLDaLbLjIZGxz?p=preview

2

You can attach the loading spinner to the $rootScope instead of the controller’s scope, and hide it in the return of $http's promise (the then() function): $rootScope.loading.hide();

3 
app.factory('blogPosts',function($http){
  var _posts = [];
  return {
    all: function() {
      return $http.get('api.json').then(function(response){
        var blogData = response.data
        var postKeys = Object.keys(blogData)
        for (var i = 0; i < postKeys.length; i++) {
          var blogPost = blogData[postKeys[i]]
          blogPost.url = postKeys[i]
          _posts.push(blogPost);
        }
        return _posts;
      })
    }
  }
})

// ...

.controller('myctrl', function($scope, $ionicLoading, blogPosts) {
    $scope.shops = [];
    $scope.loading = $ionicLoading.show({
      content: 'Loading...',
      showBackdrop: false
    });
    blogPosts.all().then(function(shops) {
      $scope.shops = shops;
      $scope.loading.hide();
    })
})
4

I get undefined is not a function (evaluating blogPosts.all().then(function…
Then a few seconds later I get console.log of my http request from the factory service.

Same error using $rootScope but error after the success of data.

5

Some samples:


If you’re still having trouble, fork one of those and let us see what’s not working for you.

6

I’ve re-written my code 4-5 times from scratch using the various examples/etc, and each time it always comes down to the same error on the same block of code. Which are identical to the working examples.

The code that breaks is code that works.

Should I be including some sort of extra dependancy? Do I have the wrong ionic version (i have 0.9.21)

It comes down to changing this (working):

$scope.thing = ThingsService.all();

To (non-working):

ThingsService.all().then(function(response){
    $scope.thing = response;
    $scope.loading.hide();
})

This is what I’m including in the controller “angular.module”

['ionic.service.platform', 'ionic.ui.content', 'ionic.ui.list', 'ionic.service.loading']

And this is in my .controller

function($scope, $ionicLoading, ThingsService)
7

I’d check your angularjs version - I’m on 1.2.4. Updating it fixed one of the bugs I was having with modal dialogs awhile back.

Which is why writing/pasting it into codepen can help - as those can be set to load whatever versions of libraries…

8

Your Angular module is a bit unusual. Why are you loading each Ionic dependency individually? Why not use:

angular.module('kit', ['ionic'])

Also, 0.9.21 is OLD. There have been some major bug fixes and enhancements since then. I’d strongly suggest updating.

Finally, without a demo, it’s going to be really hard for any of else to really provide much more help.

9

Well I based my project off of the ionic starter app; and that’s how it was in there so I never changed it.

Though I just spent about an hour updating both ionic/angular from scratch and merging all my changes manually into the new starter app. [ionic 0.9.26, angular 1.2.12] Noted a few shifts in architecture but nothing overly crazy.

My app.js now just contains angular.module('myapp', ['ionic']) and both controllers.js and services.js are angular.module('myapp', []) (i’m making the assumption that the app.js declerations carry over to services/controllers?)

Now everything is pretty much working the way it was before; including the error! (doh!) And the best I can figure is that the .then() is not arbitrarily available in my all: function(){} (Does ionic/angular inject .then()? only on certain types?)

I have a ton of stuff I need to have completed for monday so I’ll be working 16-20 hour days till then; i’ll try to get some code dropped into codepen at somepoint today

10

Can you post some code from your “ThingsService”. then is not a function that Ionic provides. then has to do with promises. If your “ThingsService” is not returning a promise on ThingsService.all(), then Ionic will never process a then.

11

I think you should do the $http.get inside the controller so that you can tie into its success hook where you can then do the $ionicLoading.hide(). Also I don’t think it works to assign $ionicLoading.show({...}) to a function. That’s probably why you got the undefined is not a function. Just call $ionicLoading.hide(), any previous loading screen will be hidden.

.controller('myctrl', function($scope, $ionicLoading, myservice) {
    $ionicLoading.show({
      template: 'Loading...',
      noBackdrop: true
    });
    $http.get(...).success(function(data){
       //do something with the returned data, then
       $ionicLoading.hide();
    });
})

This post is quite old so maybe it will help someone in the future.