Ionic : how to have multiple tabs on the same template?

ionic-v1
1

I would like to have multiple ion tabs which points on the same view with just a parameter change in the URL.

I don’t manage to do that, the page loads, when I click on both tab, the browser loads /tab/dash/all…

HTML:

<ion-tabs class="tabs-icon-top">

 <!-- Adding 5 tabs -->
  <ion-tab title="All" icon="icon ion-grid" ng-repeat="tab in tabs" href="#/tab/dash/{{ tab.id }}">
    <ion-nav-view name="tab-articles"></ion-nav-view>
  </ion-tab>

</ion-tabs>

JS:

$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
  url: "/tab",
  abstract: true,
  templateUrl: "templates/tabs.html"
})

.state('tab.dash', {
  url: '/dash/:filter',
  views: {
    'tab-articles-all': {
      templateUrl: 'templates/tab-dash.html',
      controller: 'DashCtrl'
    }
  })

This is behaving strange when I click the tabs, the navigation starts and reverts. If I force a navigation using $state.go then it keeps switching between the two views

2

So this is something that has been brought up before



3

Thanks for the reply… But I think these threads answer part of my issue

In my template i say

<ion-nav-view name="tab-articles"></ion-nav-view>

“tab-articles” is a string (no need for angular to compile it)

But the issue is all 5 of my tabs point to the same state name

I am assuming the ion-tab directive chooses the current tab based on the view name?

4

its a fairly complicated process.
It will look at the url, find out what state should be shown, and what nav view should be shown.

It might be helpful if you put together a sample of what you’re trying to do