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