后退按钮可通过标签按下导航

时间:2015-12-04 21:41:14

标签: angularjs ionic-framework angular-ui-router ionic

我的应用程序有四个视图:启动页面(没有标签页),登录页面,主页和过滤器(所有都有标签路由到其中三个)。当我在选项卡中导航时,当我使用浏览器中的后退按钮(或者系统的后退系统)时,请说splash -> home -> filters -> home -> login -> home,它将从home -> login -> home -> filters -> home -> splash开始。我希望它将home页面视为没有附加历史记录的主页。在splash -> home -> filters -> home -> login之后导航回来时应该是login -> home,那就是它的结束。

这是我的.config()

.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {

  // Android
  $ionicConfigProvider.tabs.position('bottom');

  // States
  $stateProvider

  .state('tab',{
    url:'/tab',
    abstract: true,
    templateUrl: 'templates/tabs.html',
    controller:'TabCtrl'
  })

  .state('splash',{
    url:'/',
    templateUrl:'templates/splash.html',
    controller:'SplashCtrl',
    onEnter: function($state){
      // $state.go('tab.home');
    }
  })

  .state('tab.login',{
    url:'/login',
    views:{
      'tab-login':{
        templateUrl:'templates/login.html',
        controller:'LoginCtrl'
      }
    }
  })

  .state('tab.home',{
    url:'/home',
    views:{
      'tab-home':{
        templateUrl:'templates/home.html',
        controller:'HomeCtrl'
      }
    }
  })

  .state('tab.filters',{
    url:'/filters',
    views:{
      'tab-filters':{
        templateUrl:'templates/filters.html',
        controller:'FiltersCtrl'
      }
    }
  })


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

我正在使用ui-sref s进行标签导航,这是:

<ion-tabs class="tabs-icon-only tabs-color-active-positive">

  <!-- Login Tab -->
  <ion-tab title="Login" icon-off="ion-person" icon-on="ion-person" ui-sref="tab.login" >
    <ion-nav-view name="tab-login"></ion-nav-view>
  </ion-tab>

  <!-- Home Tab -->
  <ion-tab title="Recipes" icon-off="ion-home" icon-on="ion-home" ui-sref="tab.home"  on-select="enteringHome()" on-deselect="">
    <ion-nav-view name="tab-home"></ion-nav-view>
  </ion-tab>

    <!-- Filters Tab -->
  <ion-tab title="Filters" icon-off="ion-search" icon-on="ion-search" ui-sref="tab.filters" >
    <ion-nav-view name="tab-filters"></ion-nav-view>
  </ion-tab>

</ion-tabs>

1 个答案:

答案 0 :(得分:0)

1:首先try this    put:cache:状态定义中的false。

.state('splash',{
url:'/',
templateUrl:'templates/splash.html',
controller:'SplashCtrl',
cache:false,
onEnter: function($state){
  // $state.go('tab.home');
}})

2:可能这可以帮助你。在app.js中输入这个

$state.$current.name == "";var backbutton=0;
$ionicPlatform.registerBackButtonAction(function (event) {

    if (($state.$current.name == "tab.home")) {
        if(backbutton==0){
            backbutton++;
            window.plugins.toast.showLongBottom('Press again to exit');
            $timeout(function(){backbutton=0;},3000);
        }else{
            navigator.app.exitApp();
             }
    }else if(       ($state.$current.name == "tab.login") ||
                    ($state.$current.name == "tab.filters")){
                    $state.go("app.main.home");
                }else{
                    navigator.app.backHistory();
              }
    }, 100);