$ionicLoading.hide() doesn't work with nightly-1717

ionic-v1
1

Hello everybody

I want use $ionicLoading with nightly but it doesn’t work, i have test with $ionicLoading.hide(); because a instance is depreced but it doesn’t work again :s

/** Update conference list by Internet **/
        $scope.updateConference = function(){
            console.log("Updating conference");

           $ionicLoading.show({
               content: '<div>Update conferences list<br><figure><img src="img/atos-loader.gif"/></figure></div>',
               animation: 'fade-in',
               showBackdrop: true,
               maxWidth: 200,
               showDelay: 0
           });

            ConferencesService.getOnlineConference().query(
                function(confOnline){
                    if(!ConferencesService.checkSameConferences($scope.conferences,confOnline)){
                        $scope.conferences = confOnline;
                        ConferencesService.setConferencesResource(confOnline);
                        localStorage.setItem('conferences', JSON.stringify(confOnline));
                        $ionicLoading.hide();
    /*                    $ionicPopup.alert({
                            title: 'Update conference',
                            content: 'You have correctly update conference list'
                        });*/
                    }else{
                        $ionicLoading.hide();
     /*                   $ionicPopup.alert({
                            title: 'Update conference',
                            content: 'You have already a last conference list'
                        });*/
                    }
                },
                function(reason){
                    $ionicLoading.hide();
                    return -1;
                }
            );
        }
2

What exactly ‘doesn’t work’? Is the loading still there?
I see you are using the old config (with content) instead of the new (with template(Url)) : http://ionicframework.com/docs/api/service/$ionicLoading/ vs http://ionicframework.com/docs/nightly/api/service/$ionicLoading/

Maybe if you updated the config to the nightly build, it might work

3

I can confirm, using the new syntax I can’t seem to show the loader. This code:

    $ionicLoading.show({
      template: 'Loading...'
});

simply does nothing right now.

4

See this working sample with the nightlies : http://codepen.io/calendee/pen/btgBl

5

Odd. I can’t see any difference and still doesen’t work. Here is my full controller’s code. I can’t see the loading screen at all. I also tried to take out all the instances of $ionicLoading.hide() to be sure, same results. No js errors. The rest of the code works as intended. Maybe I’m calling it in the wrong place?

// –––––––––––––––––––––––––––
// Numbers
// –––––––––––––––––––––––––––
.controller('NumbersCtrl', function($scope, $ionicLoading, $angularCacheFactory, Numbers) {
    $ionicLoading.show({
        content: 'Caricamento...'
    });

    var cache = $angularCacheFactory.get('cache');

    if(!cache.get('numbers')) {
        Numbers.all().success(function(data, status) {
            $scope.numbers = data.numbers;
            cache.put('numbers', data.numbers);
            $ionicLoading.hide();
        })
        .error(function() {
            $scope.showAlert = function() {
              var alertPopup = $ionicPopup.alert({
                title: 'Nessuna Rete Disponibile',
                template: 'Sembra che non ci sia nessuna connessione di rete.'
              });
             };
             $scope.showAlert();
             $ionicLoading.hide();
        })
    }

    else {
        $scope.numbers = cache.get('numbers');
        $ionicLoading.hide();
    }
})
6

Do you get an error when this controller is loaded?

My GUESS is that the controller is launching the loading indicator prior to the view getting rendered. Can you test by :

  1. Not showing the loading indicator on page load. instead, use a button on the view to trigger it like in my example.
  2. Use a timeout in your controller to get the view just a few milliseconds to render the view? Sample:
// –––––––––––––––––––––––––––
.controller('NumbersCtrl', function($scope, $timeout, $ionicLoading, $angularCacheFactory, Numbers) {
    $timeout( function() {
	    $ionicLoading.show({
	        content: 'Caricamento...'
	    });

    }, 50);

    var cache = $angularCacheFactory.get('cache');

    if(!cache.get('numbers')) {
        Numbers.all().success(function(data, status) {
            $scope.numbers = data.numbers;
            cache.put('numbers', data.numbers);
            $ionicLoading.hide();
        })
        .error(function() {
            $scope.showAlert = function() {
              var alertPopup = $ionicPopup.alert({
                title: 'Nessuna Rete Disponibile',
                template: 'Sembra che non ci sia nessuna connessione di rete.'
              });
             };
             $scope.showAlert();
             $ionicLoading.hide();
        })
    }

    else {
        $scope.numbers = cache.get('numbers');
        $ionicLoading.hide();
    }
})
7

Hello Calendee, thanks for the help.

I don’t get any error in the console. I tried your solutions without success. Here is the updated controller. I put a timeout of 1s and commented all the .hide() lines so that the loader should never disappear. I also created a button to call the showLoader function, with no results. Both when i load the page and when i click the button nothing is shown.

Controller

// –––––––––––––––––––––––––––
// Numbers
// –––––––––––––––––––––––––––
.controller('NumbersCtrl', function($scope, $ionicLoading, $angularCacheFactory, Numbers) {

    $scope.showLoader = function( ) {
        $ionicLoading.show({
            content: 'Caricamento...'
        });
    }

    window.setTimeout($scope.showLoader(), 1000);

    var cache = $angularCacheFactory.get('cache');

    if(!cache.get('numbers')) {
        Numbers.all().success(function(data, status) {
            $scope.numbers = data.numbers;
            cache.put('numbers', data.numbers);
            // $ionicLoading.hide();
        })
        .error(function() {
            $scope.showAlert = function() {
              var alertPopup = $ionicPopup.alert({
                title: 'Nessuna Rete Disponibile',
                template: 'Sembra che non ci sia nessuna connessione di rete.'
              });
             };
             $scope.showAlert();
             // $ionicLoading.hide();
        })
    }

    else {
        $scope.numbers = cache.get('numbers');
        // $ionicLoading.hide();
    }
})

View

<ion-view title="Numeri Utili" id="numbers">

  <ion-nav-buttons side="left">
    <a class="button button-clear" href="#/home/">
      <img src="img/logo.png" style="height: 34px;" alt="">
    </a>
  </ion-nav-buttons>

  <ion-content class="has-header">
    <button ng-click="showLoader()">Loader</button>
    <div class="list">
        <a ng-repeat="number in numbers" class="item item-avatar" ng-href="#/tab/number/{{number.id}}">
          <img ng-src="{{number.preview.sizes.thumbnail}}" alt="{{number.image.title}}">        
          <h2>{{number.title}}</h2>
          <i class="icon ion-ios7-location ion-ios7-telephone"></i> <span class="numberPhone">{{number.phone}}</span>
        </a>
    </div>
  </ion-content>
</ion-view>
8

Can you turn that into a CodePen sample please?

9

@Maxime - did you ever figure out a fix for this? I’m seeing the same issue, where I cannot hide after showing.

10

Sorry, I just got around the problem :frowning: