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">
<!-- Dashboard Tab -->
<ion-tab title="All" icon="icon ion-grid" href="#/tab/dash/all">
<ion-nav-view name="tab-articles-all"></ion-nav-view>
</ion-tab>
<ion-tab title="New" icon="icon ion-wand" href="#/tab/dash/new">
<ion-nav-view name="tab-articles-new"></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"
})
// Each tab has its own nav history stack:
.state('tab.dash', {
url: '/dash/:filter',
views: {
'tab-articles-all': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
},
'tab-articles-new': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}}
})
HTML:
If you know the names of the filter parameters then why not just create separate states for each of them? Looking at your example markup you should be able to have a state config like so.
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
// Each tab has its own nav history stack:
.state('tab.dash-all', {
url: '/dash/all',
views: {
'tab-articles-all': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
})
.state('tab.dash-new', {
url: '/dash/new/',
views: {
'tab-articles-new': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
});
If you won't know all of the possible :filter
parameters when the app starts. You can add in states on the fly by using $stateNotFound event to capture the parameters, then create a state based off the params and go
to it.