Android back button previous page navigation control

ionic-v1
1

I am able to register back button function,

$ionicPlatform.registerBackButtonAction(function (event) {
      event.preventDefault(); // Back button will DO NOTHING.
      //$ionicHistory.goBack(); 
      //$state.go('menu.home');  //go to specific url
      //alert("Going back!!!");
    }, 100);

but I am unable to navigate any where , the alert works so I tried more,

$ionicHistory.goBack(); 
$state.go('menu.home');

both of em don’t work to go to previous page I have added

$ionicPlatform.registerBackButtonAction(function (event) in .run(function($ionicPlatform)

2

Hi @2909sanjay

What you want to do exactly??
Navigate to prev. page when android back button pressed??

3

@thaker …
Yes and I did it by using window.history.back();
It works just fine in android…
Now I am unable to close the app when back button is pressed @ home page.
state of my homepage:
$stateProvider

  .state('menu.home', {
url: '/page1',
views: {
  'side-menu21': {
    templateUrl: 'templates/home.html',
    controller: 'homeCtrl'
  }
}

})

4

you should make a condition inside registerbackbutton

ex:

if($state.current.name=="index") {
      var confirmPopup = $ionicPopup.confirm({
         title: 'Exit',
         template: 'Are you sure you want to close the app?',
         okText: "Yes",
    	okType: "button-positive",
    	cancelText: "No",
    	cancelType: "button-assertive"
        });
        confirmPopup.then(function(res) {
              if(res) {
        	navigator.app.exitApp();
              } else {
           	 console.log('Cancel');
         }
       	});   
      }
5

@anicacute09 solution is also right,
My logic of back button is here in .run function in app.js

$ionicPlatform.registerBackButtonAction(function (e) {
				if ($rootScope.backButtonPressedOnceToExit) {
					ionic.Platform.exitApp();
				} else if ($ionicHistory.backView()) {
					$ionicHistory.goBack();
				} else {
					ionicToast.show("Press back button again to exit", 'middle', false, 3000);
					$rootScope.backButtonPressedOnceToExit = true;
				}
				e.preventDefault();
				return false;
			}, 101);

when user press back button it will go back till it haves back view, after coming on first page, toast will come that Press back button again to exit after user click back button user will exit from app.

6

yeah you can also do that which suits your taste of performing exit using back button…

7

I tried this but it is not working…

$ionicPlatform.registerBackButtonAction(function (e) {
				if ($rootScope.backButtonPressedOnceToExit) {
					ionic.Platform.exitApp();
				} else if ($ionicHistory.backView()) {
					$ionicHistory.goBack();
				} else {
					ionicToast.show("Press back button again to exit", 'middle', false, 3000);
					$rootScope.backButtonPressedOnceToExit = true;
				}
				e.preventDefault();
				return false;
			}, 101);

it just stops back button from working

8

@anicacute09

Thank you but I tried this code and it did not work…

if ($state.current.name == "index") {
        var confirmPopup = $ionicPopup.confirm({
          title: 'Exit',
          template: 'Are you sure you want to close the app?',
          okText: "Yes",
          okType: "button-positive",
          cancelText: "No",
          cancelType: "button-assertive"
        });
        confirmPopup.then(function (res) {
          if (res) {
            navigator.app.exitApp();
          } else {
            console.log('Cancel');
          }
        });
      }

I also tried adding else case with window.history.back() but it just prevents the back button from working

9

are you sure your current state name is “index” and please check your console log for debugging…

10

Does this help?

Home page state details from router.js

 .state('menu.home', {
url: '/page1',
views: {
  'side-menu21': {
    templateUrl: 'templates/home.html',
    controller: 'homeCtrl'
  }
}
11

you should change the “index” to “mennu.home” i guess…

12

I was able to check the same in android monitor , every time I hit back button it says,

D/SystemWebChromeClient: file:///android_asset/www/js/app.js: Line 42 : Uncaught ReferenceError: $state is not defined
07-05 13:01:54.191 7197-7197/io.ionic.starter I/chromium: [INFO:CONSOLE(42)] "Uncaught ReferenceError: $state is not defined", source: file:///android_asset/www/js/app.js

I have made no changes in this ionic1 app so far and I am a new beee to ionic framework

14

you should inject $state inside .run(function)

15

ok so I did this,

.run(function($ionicPlatform, $state) {

after under ready function I did

$ionicPlatform.registerBackButtonAction(function (event) {
      if ($state.current.name == "index") {
        var confirmPopup = $ionicPopup.confirm({
          title: 'Exit',
          template: 'Are you sure you want to close the app?',
          okText: "Yes",
          okType: "button-positive",
          cancelText: "No",
          cancelType: "button-assertive"
        });
        confirmPopup.then(function (res) {
          if (res) {
            navigator.app.exitApp();
          } else {
            console.log('Cancel');
          }
        });
      }
    }, 100);

It still does not work but it has stopped giving any errors in console which means $state is working but current state is something we don’t know

16

change “index” to “menu.home” just to match your routing state names…

1 Like
17

I did the same changes and it worked moreover it is also supports the else case with window.history.back and @ home page it gives me the alert and exit if pressed yes… Thank You

People should try this all they need to do is inject the $state, $ionicPopup

18

glad that I help. Happy Coding!!!