2

我正在构建一个具有多个视图的离子包。我使用路由提供程序在不同的视图之间导航。

应用程序.js

.config(function($routeProvider,$locationProvider){

    $routeProvider
    .when('/search',
        {
            controller : 'MyController',
            templateUrl : 'partials/search.html'
        })

    .when('/not-found/:className',
        {
            controller : 'MyController',
            templateUrl : 'partials/not-found.html'
        })

我的 index.html 

  <body ng-app="MyApp">  
        <ng-view></ng-view>

      </body>
    </html>

问题是我手机上的后退按钮不起作用。即它不记得历史记录。例如，如果我从 search.html 转到 not-found.html，当我按下手机上的后退按钮时，我希望它会返回到 search.html，而不是关闭我的应用程序。我查看了离子论坛，建议使用后退按钮的方法是使用ion-nav-view. 如果我替换ng-view为ion-nav-view，则不会呈现搜索/未找到页面，我什至尝试ion-view在搜索/未找到 html 页面上添加 。
1）您能否建议一种让我的后退按钮工作的方法？

4

2 回答 2

2

为了实现这一点，您实际上需要捕获硬件后退按钮按下事件并相应地执行导航，或者您可以使用ion-nav-back-button ..

  1. 捕获硬件后退按钮事件：

    $ionicPlatform.registerBackButtonAction(function () {
  if (condition) {
    navigator.app.exitApp();
  } else {
    // handle back action!
  }
}, 100);

更多细节可以在这里找到

  1. 使用 ion-nav-back-button

    <ion-nav-bar>
  <ion-nav-back-button class="button-clear">
    <i class="ion-arrow-left-c"></i> Back
  </ion-nav-back-button>
</ion-nav-bar>

可以在此处找到有关此的更多详细信息

于 2014-12-25T05:15:43.750 回答
0

registerBackButtonAction已作为定义中属性的ion-nav-back-button一部分处理：，因为执行它又处理硬件后退按钮。使用状态配置的简单更改应该可以正常工作，如下所示：ng-clickion-nav-back-buttonbuttonEle.setAttribute('ng-click', '$ionicGoBack()')$ionicGoBack$ionicHistory.goBack()

angular
  .module('app', ['ionic'])
  .config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
     .state('search', {
        url: '/search',
        controller : 'MyController',
        templateUrl : 'partials/search.html'
    })
   .state('not-found', {
        url: `/not-found/:className',
        controller : 'MyController',
        templateUrl : 'partials/not-found.html'
    });

    $urlRouterProvider.otherwise('/search');        
  });

HTML：

<body ng-app="app">  
    <ion-nav-bar>
      <ion-nav-back-button></ion-nav-back-button>
    </ion-nav-bar>

    <ion-nav-view></ion-nav-view>
  </body>
</html>
于 2016-05-07T07:42:23.270 回答