Hi guys,
I’m a bit confused about how to set this up. I want each of the 4 tabs to inject the same html template into the nav-view but with a different resolved parameter from the URL (Alpha, Beta, Gamma, or Delta). However after a few clicking on 5 or 6 different tabs it messes up and navigates to a completely different tab to that clicked on.
Is this set up correctly at all? Or is there some bug?
<ion-nav-view></ion-nav-view>
<script id="tabs.html" type="text/ng-template">
<ion-tabs>
<ion-tab title="Alpha" href="#/tab/test/Alpha">
<ion-nav-view></ion-nav-view>
</ion-tab>
<ion-tab title="Beta" href="#/tab/test/Beta">
<ion-nav-view></ion-nav-view>
</ion-tab>
<ion-tab title="Gamma" href="#/tab/test/Gamma">
<ion-nav-view></ion-nav-view>
</ion-tab>
<ion-tab title="Delta" href="#/tab/test/Delta">
<ion-nav-view></ion-nav-view>
</ion-tab>
Here is the .config
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tabs', {
url: "/tab",
abstract: true,
templateUrl: "tabs.html",
})
.state('tabs.test', {
cache: false,
url: "/test/:test_id",
templateUrl: "templates/test.html",
controller: "testCtrl",
resolve: {
test_id: ['$stateParams', function($stateParams){
return $stateParams.test_id;
}]
}
})