Ion tabs: how to remember which tab needs to be opened when going back

ionic-v1
1

I’m using ion-tabs and some separate pages.

I have a link in one of the tabs.
When navigating from a link in a tab, how can the same tab be reopened when using the back button?

I’ve made a Plunker that illustrates what I mean:

Edit:
Might be related to How can I make a view remember the current tab

2

Did you already take a look at http://codepen.io/ionic/pen/odqCz

It seems to do exactly what you’re describing.

Furthermore, please note that there are some ongoing issues with Ionic Tabs:


3

@Robin It’s close, but not quite.

This example starts using tabs. I need to start from a page without tabs and be able to move to a page with tabs. From there this indeed works. Is it possible to adapt this example to what I want?

4

Check my gist; this is exactly what I’m doing in my project.

https://gist.github.com/rvanbaalen/ce8be8d44c33889e4e9a/d6fc8c7244f9c1f712cf5af78836c9c4853f1568

The gist isn’t a read-to-roll setup and was meant to reproduce an Ionic bug. But it should point you in the right direction.

5

Hey @Robin, I’ve tried to adapt your example, and I’ve came up with this:

It seems the back button doesn’t appear when moving from the home page to the page with tabs?

6

I’m starting to think this is just not possible with UI Router. I’ve never seen anyone successfully implement this at least. If I’m wrong, please weigh in.

So to reiterate what I’m trying to achieve:

First screen is page without tabs. Contains a link to the second screen.
Second screen is page with tabs. Every tab contains links to detailed views.
Third screen is a detailed view.

How can I set up routing so that when I navigate from screen 1, to the screen with the tabs, to the detailed view, and I go back again to the screen with tabs, the tabs know which tab was open?

Here’s my first Plunker:

Second Plunker, using @Robin’s example:

Anyone?

7

@coen_warmer this is a good question - for now I would suggest manually saving the tab’s state when leaving. Use tab’s on-deselect or scope.$on(’$destroy’) in a tab controller and save the current state name/params in a service, then re-set via $state.go the remembered state if the tab is reselected.

This however is something I’ve noticed to and would be good to have in core - tabs remembering their state somehow - but I’m not sure of a good way to do it yet.

8

@andy Ok, thanks that’s good to know. Which service should I use to save which tab is open?

It would be awesome if it could also remember the scroll position of an open tab when navigating to a detailed view.

9

@coen_warmer I’m having the exact same issue at the moment; I need to save my $stateParams between a tab switch (the data set is fetched using these params, and the tabs just represent a different view; map or list)

Regarding your question about which service to use; I recommend localStorageService

Works perfectly for all my other storage needs so far. But keep in mind that a browser’s localStorage is limited to max 5MB. I’m now playing with the idea to clear this localStorage onExit (an event that is triggered by UI-Router and can be handled when defining the state) when the user leaves the tab view (my app contains more views than just the tab view).

10

Really? Saving the state of a tab in localstorage…? Surely there must be a more elegant way to achieve this…?

11

Trying to resurrect this issue which was closed without being resolved: https://github.com/driftyco/ionic/issues/437

12

I don’t know what you might think of as 'state of the tabbut in my case I'm just saving$stateParams` to a localStorage and re-apply these params when the parent state has changed.

13

localStorage has the potential to be slow, but it’s probably not noticeable in this case.

I would just make a service called ‘tabStateCache’ or something, which is just an empty object.

Then inject that into your controllers and cache with that.

14

i just shove the state into the rootScope but the better solution is to create a service to hold the information

15

I encounter the same issue.

At first I try this solution: http://stackoverflow.com/questions/26980222/ionic-no-back-button-when-navigating-away-from-tab-view, could say it works, it make possible to nav from tab to seperate page and back, but it causes other problems: the nav back button will appear among tabs, which is more annoying than the previous one.

So with that solution, we have to use ng-switch inside tabs.html to avoid changing views stack when navigating from tabs. But apparently, that will make the code so strange and ugly, and cause more problems since it will ruin your original design of the relation for those states.

So the Solution I choose:

Quite simple, just duplicate states inside your config.router.js, for example:

  • if you have state app.chatting that need to access from tabs
  • then duplicate a new one: app.tabs.chatting , so both them will have nav buttons in the right time
  • they could share exact same code, also our states relation could survive.

Hope this will help you, I think there should be a better solution in the future.