Using tabs without nav-view

Is it possible to use tabs without defining a nav-view inside each tab? Basically I want to show a set of 4 tabs when the user has navigated to a certain point inside the app. The tabs on that view is just for showing different types of content for the current selected item the user has pressed. Main navigation is a sidebar and tabs are only used in a subview to switch content on the currently visited item. So in this case I don’t want the default behaviour that each tabs keeps track of its own navigation state because then i loose the back button to get back to the list of all items.

The only way I could achieve this was to put all the markup straight into the ion-tab directive directly, which makes by detail page huge.

You can use “ng-include” or “ui-view”.

  1. For ng-include, please see here for detailed instruction: Ng-Include
    Simply add the link to your separate html file to load it in, this solves your problem of a huge page. But this method may result in problems since that ion-tabs create some more DOM tree inside it, ng-include may break the Dom Tree. I suggest you to use the second way.

  2. For ui-view, have a look at ui-router’s github pages. UI-Router
    Using ui-view is indeed using a basic version of ion-nav-view, it also have names but without the function of tracing histories and stacks.

Hope this helps.

Neither of them works. The results is this:

<ui-view name="home" class="pane tab-content" nav-view="active">
<ui-view name="contact" class="pane tab-content" nav-view="active">

The tabs wont switch content since the class “tab-content” and nav-view directive gets attached on the ui-view itself and not the first child inside the ui-view which is the actual ion-view. Same goes for ng-include.

Can you simply use a footer on that page and define your own tab/buttons inside the footer

Maybe I misunderstand your problems?

I tested and it works pretty well for me.

And sure darrena answer is also a good solution. Use a static css tab bar and attach url to that. Only change one view will make the same effect.

That could maybe work but I want to take advantage of some of the features that ion-tabs and ion-tab provides. Such as icon-on and icon-off. And also on Android I want the tabs to get on the top of the page which is default for Android. Those aren’t possible if I define my own tabs/button inside a footer.

you could optionally use a header for android and footer for ios. then use ng-class active to determine which icon to display on which ever button/tab is enabled

Do you mean like this?

Yes, I mean like that. But I don’t want to include all the markup for all the tabs in the same template, in your case templates/tab-charts.html contains all the markup for those 3 tabs.

Here is a codepen of what I’m trying to do:

  • Press Sign in
  • Open sidemenu
  • Press List
  • Select an item in the list

Here I want all the tabs to have its content for each tab inserted by ng-include or ui-view as suggested above. In this codepen I’ve tried using ui-vew. At first it seems to work, but you can’t revisit a already visited tab. Also I’m losing the back button to get back to the list.

Hey hazmaho! I am having the same problem as you.
Could you solve it?