Concerns about ionic navigate out of tab but keep history, transition and back button

1
votes

Navigate to Friends tab then click "G.I. Joe". Back button, transition and history are working as expected.

this sample

But I want it to hide the tabs while entering the details page, so I made the view replace the main nav, like this:

.state('tab.friend-detail', {
  url: '/friend/:friendId',
  views: {
    '@': {
      templateUrl: 'friend-detail.html',
      controller: 'FriendDetailCtrl'
    }
  }
})

But now Back button, transition and history stop working.

expected to work

Here is just what I want

2
angularjsangular-ui-routerionic

2 Answers

0
votes

Looking at your tabs.html:

<!-- 
  Create tabs with an icon and label, using the tabs-positive style. 
  Each tab's child <ion-nav-view> directive will have its own 
  navigation history that also transitions its views in and out.
-->
<ion-tabs class="tabs-icon-top">


  <!-- Pets Tab -->
  <ion-tab title="Dashboard" icon="icon ion-home" href="#/tab/dash">
    <ion-nav-view name="tab-dash"></ion-nav-view>
  </ion-tab>


  <!-- Adopt Tab -->
  <ion-tab title="Friends" icon="icon ion-heart" href="#/tab/friends">
    <ion-nav-view name="tab-friends"></ion-nav-view>
  </ion-tab>


  <!-- About Tab -->
  <ion-tab title="Account" icon="icon ion-gear-b" href="#/tab/account">
    <ion-nav-view name="tab-account"></ion-nav-view>
  </ion-tab>


</ion-tabs>

it already states at the top that each ion-nav-view has its own navigation history. So if you load the details html in another view you'll lose history information. Hence there's no backbutton.

However, look at this proposed solution witch uses a custom directive to achieve what you want.

0
votes

Here is the expected to work.

How ?

  • I added the tabs-item-hide class for the <ion-tabs> tag with ng-class.
  • Then use $rootScope as a flag inside every controller to detect if current view wants to show or not the tabs.

Maybe my solution is not good enough, but I think it will help you.

Cons?

  • You have to put the $rootScope flag (in my example is : $rootScope.data.hideTabs) in every controller that you want the tabs to show or hide.
  • Everything inside <ion-content> won't be shown.

But you can modify it anytime for better usage, for example you can create a factory to manage it.

P/S: I have inspired from this post