Routing in ionic with nested tabs does not work

Question

Hello i am new to both ionic and angular js. I just started the framework yesterday but i am really stuck in the process below. I am trying to create a nested tab views inside another view. However it's not working. so this is the listing part my menu view for tabs:

    <ion-item class="item-icon-left" menu-close href="#/app/browse">
      <i class="icon ion-ios-stopwatch"></i>
      browse
    </ion-item>
    <ion-item class="item-icon-left" menu-close href="#/app/tab">
      <i class="icon ion-ios-calendar"></i>
      tabs
    </ion-item>

this is my tabs view:

    <ion-view view-title="Tabs">
      <ion-content>
        <ion-tabs class="tabs-icon-top tabs-color-active-positive">
          <ion-tab title="Status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/app/tab/dash">
            <ion-nav-view name="tab-dash"></ion-nav-view>
          </ion-tab>
          <ion-tab title="Chats" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/app/tab/chats">
            <ion-nav-view name="tab-chats"></ion-nav-view>
          </ion-tab>

          <ion-tab title="Account" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/app/tabs/account">
            <ion-nav-view name="tab-account"></ion-nav-view>
          </ion-tab>


        </ion-tabs>

      </ion-content>
    </ion-view>

the angular js script for routing:

  .state('app', {
    url: "/app",
    abstract: true,
    templateUrl: "templates/menu.html",
    controller: 'AppCtrl'
  })
  .state('app.browse', {
    url: "/browse",
    views: {
      'menuContent': {
        templateUrl: "templates/browse.html"
      }
    }
  })    
  .state('app.tab',{
    url: "/tab",
    abstract: true,
    views: {
      'menuContent': {
        templateUrl: "templates/tabs.html"
      }
    }
  })
  .state('app.tab.dash',{
    url: "/dash",
    views: {
      'tab-dash': {
        templateUrl: "templates/tab-dash.html"
      }
    }
  })

from the menu list the browse state works fine however the tabs state does not load with above script but loads if i remove its abstract property. Not to mention the nested dash state of the tabs never loads

Answer 1

Have you tried refitting you code into the Codepen Tabs and Nav example I had a similar problem but following this example was a quick fix.

Make sure your:

href="#/app/tabs/account"

are pointing to the right href for your project. If you have a codepen I can have a deeper look.

Answer 2

You need to make the browse and tab their own state and template url. They don't need to be a child template of the the app state.. Please try the ffg. modifications..

.state('app', {
        url: "/app",
        abstract: true,
        templateUrl: "templates/menu.html",
        controller: 'AppCtrl'
      })

  .state('browse', {
    url: "/browse",
    templateUrl: "templates/browse.html",
    controller: 'BrowseCtrl'
  })  

  .state('tab',{
    url: "/tab",
    templateUrl: "templates/tabs.html",
    controller: 'TabsCtrl'
  })

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

.state('tab.chats',{
        url: "/chats",
        views: {
          'tab-chats': {
            templateUrl: "templates/tab-chats.html"
          },
    controller: 'ChatsCtrl'
        }
      })

.state('tab.account',{
        url: "/account",
        views: {
          'tab-account': {
            templateUrl: "templates/tab-account.html"
          },
    controller: 'AccountCtrl'
        }
      })

then in order to access the tabs.. you need to use this url pattern - href="#/tab/dash", href="#/tab/account" and so on...

Hope this helps! :)

Answer 3

A little late but here I created a codepen for this. That updates the child view when a button or a sidemenu item is pressed with more detail inside the codepen by making multiple child views share a name like so

 views: {
        'shared-child-view' :{
          templateUrl: "[path to your children, in our case child1.html and child2.html]"
        }
      }`

You can alternate or change each child view inside a view to evrey view with the same name, in this case "shared-child-state"

  <div ui-view name="shared-child-view"></div>

and it can be made clickable with

<a href="#/sidemenu/parent/child2" class="item">Child View 2
              </a>

This doesnt work if you use ui-serf.

I hope this helps someone!