Hiding the iconic $ionicLoading modal with hardware backbutton Android


#1

i am showing the $ionicLoading modal when the user waits for the data from the server.

The app has various scenarios so i want the user to goback to the previous view or just to hide the $ionicLoading modal with the hardware backbutton.

right now my code is like this

     $scope.showModal = function() {
      $ionicLoading.show({ 
       template: '<ion-spinner icon="spiral"></ion-spinner> Please Wait...'
     });
    };
     $scope.showModal();

when the data comes back i am hiding it like this:

$ionicLoading.hide();

How can i implement the hardware back button so it either closes the modal or goes back to the previous view or closes the app if the modal is being shown in the first view


#2

You could maybe use $ionicView.beforeLeave

http://ionicframework.com/docs/api/directive/ionView/


#3

Here’s a tutorial: http://www.gajotres.net/ionic-framework-handling-android-back-button-like-a-pro/

In few words, you need to handle back button using a right priority. Priority is a number ranging from 0 to 500. Depending on a number hardware back button will handle different actions.

Example:

  $ionicPlatform.registerBackButtonAction(function(event) {
    if (true) { // your check here
      // Handle your logic here
    }
  }, 500);

Priority 500 should handle loading overlays.