首页 文章

离子 - 离子导航视图不起作用

提问于
浏览 次
2

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

app.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 . 如果我用 ion-nav-view 替换 ng-view ，搜索/未找到页面不会渲染，我甚至尝试在搜索/未找到的html页面上添加 ion-view .
1）你能建议一种让我的后退按钮工作的方法吗？

angularjs ionic-framework ionic

2 回答

  • 2

    为了实现这一点，你实际上需要 capture the hardware back button pressed event 并相应地执行导航或者你可以使用 ion-nav-back-button ..

    • 捕获硬件后退按钮事件：
    $ionicPlatform.registerBackButtonAction(function () {
  if (condition) {
    navigator.app.exitApp();
  } else {
    // handle back action!
  }
}, 100);

    更多细节可以找到here

    • 使用离子导航后退按钮
    <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>

    有关这方面的更多详情，请访问here

    回复于
  • 0

    registerBackButtonAction 已作为 ion-nav-back-button 的一部分处理，作为 ion-nav-back-button 定义中 ng-click 属性的一部分： buttonEle.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>
    回复于

相关问题