Ion-tabs and ui-router issues


#1

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;
    }]
  }
})