Back button navigates through tab presses

Question

My app has four views: a splash page (no tabs), login, home, and filters (all with tabs that route to the three of them). When I navigate through the tabs, say splash -> home -> filters -> home -> login -> home when I use the back button in the browser (or android's system back) it'll go all the way from home -> login -> home -> filters -> home -> splash. I'd like it treat the home page as a home page with no history attached to it. When navigating back after splash -> home -> filters -> home -> login it should be login -> home and that's the end of it.

Here's my .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('/');
})

I'm using ui-srefs for the tab navigation and here's that:

<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>

I've found [this](http://stackoverflow.com/questions/30601140/how-to-avoid-stacking-navigation-history-in-tab-bar-states/30603432#30603432) solution, however this doesn't look like it works for a subview in any of the tabs (ex: `filters.news` or `filters.sports`). — Larry Rubin, Dec 07 '15 at 19:16

score 0 · Answer 1 · edited May 23 '17 at 10:28

1: first try this put : cache:false in state defination.

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

2: may be this could help you.put this in 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);

Thanks, but this seems too hack-ish, which I'm really trying to avoid. It'd probably work, but adding any views and subviews would be a nightmare down the road. — Larry Rubin, Dec 07 '15 at 18:32

Back button navigates through tab presses

1 Answers1