Ionic - $ionicPlatform.registerBackButtonAction didn't destroy

Question

I'm created one side menu project. It has 3 HTML files: firstPage.html contains button NEXT (go to secondPage.html). Same as secondPage.html that contains button NEXT (go to thirdPage.html) and for thirdPage.html NEXT button (go to firstPage.html). Every html has their own controller.

I followed this link in handling my back button action for Android device. It worked but for already registered back button didn't destroy after I changed my state.

Based on my codes below, the result was when I clicked android back button at firstPage.html, its prompt the alert. Then I clicked NEXT button in firstPage.html then directly go to secondPage.html. When I clicked android back button in that page, its also prompt me the alert. Eventhough the 'TheSecondController' didn't have '$ionicPlatform.registerBackButtonAction'. Same with thirdPage.html.

Here is my code:

Javascript: app.js

.state('app.firstPage', {
      url: '/firstPage',
      views: {
        'menuContent': {
          templateUrl: 'templates/firstPage.html',       
          controller: 'TheFirstController'
        }
      }
    })

    .state('app.secondPage', {
      url: '/secondPage',
      views: {
        'menuContent': {
          templateUrl: 'templates/secondPage.html',     
          controller: 'TheSecondController'
        }
      }
    })

    .state('app.thirdPage', {
      url: '/thirdPage',
      views: {
        'menuContent': {
          templateUrl: 'templates/thirdPage.html',
          controller: 'TheThirdController'
        }
      }
    }) 

HTML: firstPage.html

<ion-view view-title="First">
  <ion-content>
    <h1>First</h1>
      <button class="button button-block button-positive" ui-sref="app.secondPage">Next</button>
  </ion-content>
</ion-view>

HTML: secondPage.html

<ion-view view-title="Second">
  <ion-content>
    <h1>Second</h1>
      <button class="button button-block button-positive" ui-sref="app.thirdPage">Next</button>
  </ion-content>
</ion-view>

HTML: thirdPage.html

<ion-view view-title="Third">
  <ion-content>
    <h1>Third</h1>
      <button class="button button-block button-positive" ui-sref="app.firstPage">Next</button>
  </ion-content>
</ion-view>

Javascript: TheFirstController.js

.controller('TheFirstController', function($scope, $ionicPlatform, $ionicPopup) {  

    var deregisterFirst = $ionicPlatform.registerBackButtonAction(
      function() {
        if (true) { // your check here
          $ionicPopup.confirm({
            title: 'System warning',
            template: 'Are you sure you want to exit?'
          }).then(function(res) {
            if (res) {
              ionic.Platform.exitApp();
            }
          })
        }
      }, 100
    );

    $scope.$on('$destroy', deregisterFirst);
})

Javascript: TheSecondController.js

.controller('TheSecondController', function() {  

    //Allow user to go to previous page
})

Javascript: TheThirdController.js

.controller('TheThirdController', function() {   

    //Allow user to go to previous page

});

Please anyone help me. Thank you.

Answer 1

The $ionicPlatform.registerBackButtonAction() function registers the action for the whole Application, not specific to a page. $ionicPlatform is a service created by Ionic so it is a singleton (as all angular services are) therefore there is only one instance of it in the app.

So when you set the registerBackButtonAction in one controller it sets it for the whole app.

If you want it to exit only if you're on the first app, you have to add an if() on the state name. Something like

if($state.current.name === 'app.firstPage'){
  //your code here
}

The same way the guide you followed did it.