$ionicLoading.hide() is not working inside .then

ionic-v1
1

Hi, I am facing problem with $ionicLoading. $ionicLoading.hide() is not working inside .then. The error on console says “$ionicLoading.hide is not a function” I have verified that there is no typo. And I can safely say that $ionicLoading is correctly injected as $ionicLoading.show() is working.

$scope.signin = function() {
    var credentials = {
        ph_no: $scope.ph_no,
        password: $scope.password
    };
    $ionicLoading.show({
        template: '<ion-spinner icon="bubbles"></ion-spinner><br/>Loading...',
        delay: 100
    });
    $auth.login(credentials).then(function(data) {
        // If login is successful, redirect to the offers state
        $ionicLoading.hide();
        $state.go('app.offerslist', {});
    }, function(error) {
        console.log("promise error");
    });
};

It’s my signin function which gets called when user submits signin form. Please help. Thanks you.

2 
$auth.login(credentials).then(function(data) {
        // If login is successful, redirect to the offers state
        $rootScope.$broadcast('app.loggedIn');
    }, function(error) {
        console.log("promise error");
    });

Use the code above in your signin function, you will now broadcast a successful sign in throughout your app.

Use the code below (put it on the same level as a controller) to catch the broadcast and act on it.

.run(['$rootScope', '$ionicLoading', function ($rootScope, $ionicLoading) {
    // Event listern on the broadcast "LoggedIn".
    $rootScope.$on('app.loggedIn', function (event) {
        $ionicLoading.hide();
        $state.go('app.offerslist', {});
   });
}])
.controller("etc........Remove this line"

Don’t forget to inject $rootScope in your controller otherwise it’s unavailable. I would have done it for you but you did not provide the controller just the sign-in function.

3

Hi Tarik,

Thanks a lot for your reply. I tried that code but it is not working. $ionicLoading.hide() is not working. You can check my full code at https://gist.github.com/ssd532/1e4ab76a2f3b17bcb7cd Even after transiting to the next state the loading bubbles from the signin keep on spinning. The error $ionicLoading.hide is not a function is gone though.

Thanks.

4

You have to put

$rootScope.$on('app.loggedIn', function (event) {
    console.log("inside run");
    $ionicLoading.hide();
    $state.go('app.offerslist', {});

});

in the controller not in the run function.

5

I put the code inside .controller but to no avail. You are correct, the code was not executing at all inside .run but in .controller it has again started throwing the same $ionicLoading.hide is not a function error.

6

Ok there is no need for broadcasting stuff. I created a working example for you without broadcasting:

7

I can’t believe that the problem was with the sequence in which parameters were passed for services injection. I had following in the code

.controller('AuthController', ['$auth', '$scope', '$ionicPopup, '$ionicLoading', 
function($auth, $scope, $ionicLoading, $ionicPopup)  {
                
                ..... code .......
 }

The position of $ionicLoading and $ionicPopup was not correct which messed up the things. Correcting the positions solved the problem, but I am still not getting why $ionicLoading.show() was working.

Thanks Class for your help.

8

No surprise here:

.controller('AuthController', ['$auth', '$scope', '$ionicPopup, '$ionicLoading', 
function($auth, $scope, $ionicLoading, $ionicPopup)  {

postulates a mapping between names and javascript objects (services). AngularJS requires them to be on order to map them correctly.

So what you did was to map the name ‘$ionicLoading’ to the object $ionicPopup and vice versa. You probably could have called $ionicPopup.hide() with some success here :wink:

9

Understood :slight_smile: But the mystery is why $ionicLoading.show() worked. Anyways I think I might be doing something wrong.

10

Yeah, that’s quite a riddle. Seems like some racing condition to me, which I also struggle to solve in my App.