Ionic tabs "auto" navigation


#1

The ‘auto’ back function and ‘remember history’ function of is pretty nice.

But if I have a link on a page that go directly into another tab’s 2nd layer, I will never be able to see the 1st layer of the 2nd tab due to the ‘remember history’ function.

Here is the codepen project.

If you press the button ‘about navstack’, you see the 2nd layer of ‘about’ tab. Because you go directly into the 2nd layer of ‘about’ tab you will never be able to see the 1st layer of ‘about’ tab.

To see what the 1st layer of the ‘about’ tab is, press ‘F5’ to refresh browse and press the ‘about’ tab in the middle part of the bottom bar.

how do we solve this?


#2

anyone help please? I really struggled with this.

Basically what I want to do is to list some featured items in the ‘home’ tab. These featured items belong to other tabs. e.g.:

‘home’ tab:
1. playGameFire
2. PlayGameWater

game tab
1. lists of games (it contains: PlayGameFire info page and PlayGameWater info page)
2. lists of servers

But, when ‘playGameFire’ is pressed in the ‘home’ tab, it goes streight into PlayGameFire info page. There will be no way to see ‘lists of game’ and ‘lists of servers’.

How to solve this ??


#3

I have exactly the same problem.

Found solution here: Tabs navigation + unique navigation history stack

Just about to implement it. But generaly, for me the tabs navigation is not suitable for all scenarios out of the box. There are scnearios where we need to hack is slightly…unfortunately.


#4

Well i dont know how to solve it correctly but this could do the thing…

First way, in 2nd layer add back button and link it to about 1th layer

<ion-view hide-back-button="true">
    <ion-nav-buttons side="left"> 
        <ion-nav-back-button> ... </ion-nav-back-button>
    </ion-nav-buttons>
    <ion-content>
    </ion-content>
</ion-view>

Second way would be something like this, write to what state back buttons go

  $ionicPlatform.registerBackButtonAction(function(){
    switch($state.current.name){
      case 'about.layer2' : $state.go('about.layer1'); break;
      ...
    }
  }, 101, 0);

First way wont work if you use Phones that has back buttons on device (Back button will get back from layer1 to layer2).
Second way you will have to make all page states what page goes where…


#5

Thanks. I saw the codepen and that is exactly the issue I am trying to deal with. However, I haven’t figured out what he did to make it work.??? because of the added controller?? The controller only seems to provide the ‘active css’ state for the tabs?


#6

Hi. I also had a go of both solutions you mentioned before I asked here. But neither solution is neat and also difficult to maintain.


#7

The idea is that all pages are displayed in one tab therefore the navigation works and the tab bar is used only to indicate the selected tab - even though the tab is not selected in fact.

It works nice but I don’t like hacks, so I ended up opening details always in the selected tab:
Tab “Products”: Products->ProductDetail->Invoices->InvoiceDetail
Tab “Invoices”: Invoices->InvoiceDetail


#8

Thanks. But I still dont really get it. If you look at my codepen code, why doesn’t the navigation work for the ‘about navstack’???


Show back button when access from different tab
#9

Ah. I see. So you mean there is only 1 '<ion-nav-view>' for all tabs…

I actually did the same thing in my implementation. But I still have my featured items in my ‘home’ page. Rather than going into the page of featured item. It goes to the lists of items.

e.g.
Tab “home”: GameA, GameB
Tab “games”: games->Lists of Games->GameA

if press GameA at home page, it goes to ‘lists of games’ in tab games rather goes directly to GameA.
But this does not solve if ‘tab games’ have more/deeper pages


#10

You can also drop the back navigation at all (less user friendly, but straightforard to implement) - see mobile version of facebook - not the android/ios app.


#11

mobile version fo facebook? you mean a demo from here? Care share the link please?


#12

just go to facebook.com on your smart phone


#13

thanks. I understood that we could manually drop a back button. But dont understand what’s special about the facebook mobile page, does it use back button all the time?


#14

it doesn’t have back button at all… the tab is active only when you display a list of entities (messages, friends etc.)…once you select one entity the tab is deactivated. to go back to the list you need to tap on the tab since there is no back button.


#15

Oh. Sorry about my English. I thought you meant drop the ‘back button’ on all pages (meant add the button on all pages).

But, removing the back button doesn’t solve the problem. Have a look at my codepen in top post. If you press the ‘about navstack’ on the ‘home’ tab. You go into the 2nd page of the ‘about’ tab directly. Now if you press the ‘about’ tab, it doesn’t show you the 1st page of about tab.


#16

This I solved too, just dont use

"href="#/tab/about"

but use

$state.go('tabs.about')

instead.


#17

What did I do wrong? Cant make it work

I added ng-click or (maybe on-select) to the about tab. added function to the controller in the very end of javascript. but still shows the same problem


#18

It is in hometab controller. You need to place click handler in “app controller”.

You can test it using this but don’t do that in your code, it is ugly. It is just to show you, that the gotoabout() must besomewhere else:

  $rootScope.goToAbout = function(){
    alert('a')
    $state.go('tabs.about');
}

I have it in AppCtrl in my app:

<body ng-controller="AppCtrl">

#19

Oh. I copied the example code from Ionic and forgot the controller was only for the ‘home tab’.

With this solution, I actually do not need to use the hack.

But do not really understand the difference between ui-sref/link & $state.go.

In any case, Thanks very much, alfons12. You are a star. :smile: