javascript - Ionic - $ionicPlatform.registerBackButtonAction 没有销毁

Question

我创建了一侧菜单项目。它有 3 个 HTML 文件:firstPage.html 包含按钮 NEXT(转到 secondaryPage.html)。与包含 NEXT 按钮(转至thirdPage.html)的 secondaryPage.html 和thirdPage.html NEXT 按钮(转至firstPage.html)相同。每个 html 都有自己的 Controller 。

我关注了this link处理 Android 设备的后退按钮操作。它有效，但在我更改状态后，已经注册的后退按钮没有销毁。

根据我下面的代码，结果是当我单击firstPage.html处的android后退按钮时，它会提示警报。然后我单击firstPage.html中的NEXT按钮，然后直接转到secondPage.html。当我单击该页面中的 android 后退按钮时，它也会提示我警报。尽管“TheSecondController”没有“$ionicPlatform.registerBackButtonAction”。与thirdPage.html 相同。

这是我的代码:

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

});

请任何人帮助我。谢谢。

Answer 1

$ionicPlatform.registerBackButtonAction() 函数注册整个应用程序的操作，而不是特定于某个页面。 $ionicPlatform 是由 Ionic 创建的一项服务，因此它是一个单例(与所有 Angular 服务一样)，因此应用程序中只有它的一个实例。

因此，当您在一个 Controller 中设置 registerBackButtonAction 时，它会为整个应用程序设置它。

如果您希望它仅在您使用第一个应用程序时退出，则必须在状态名称上添加 if()。 类似的东西

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

与您遵循的指南的操作方式相同。