[Solved] Tab view as content of a side-menu template in b14?


I started from the ion-side-menu starter and I am trying to change one of the view to have tabs.
It was working fine until I upgraded the lib to b14.

Since b14, it doesn’t work well at all. so tried again from scratch and managed more or less to get tabs, with some issues.

Let’s take an easy example:

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

.state('app.tabs', {
        url: "/armory",
        views: {
          'menuContent': {
            abstract: true,
            templateUrl: "templates/tabs.html",
            controller: 'TabsCtrl'
      .state('app.tabs.one', {
        url: '/one',
        views: {
          'tabOne': {
            templateUrl: 'templates/tabs.one.html',
      .state('app.tabs.two', {
        url: '/two',
        views: {
          'tabTwo': {
            templateUrl: 'templates/tabs.two.html',

My menu has entries for each view, including one for app.tabs:

<ion-item nav-clear menu-close href="#/app/tabs">Tabs</ion-item>

My abstract tabs is as follows:

<ion-tabs class="tabs-striped tabs-bottom tabs-background-dark tabs-light">
        <ion-tab title="Tab One" ui-sref="app.tabs.one">
		<ion-nav-view name="tabOne"></ion-nav-view>
	<ion-tab title="Tab Two" ui-sref="app.tabs.one">
		<ion-nav-view name="tabTwo"></ion-nav-view>

(by the way, tabs-bottom doesn’t work since b14, it’s at the top anyway on Android, that sucks)

and each tab is pretty simple:

<ion-view view-title="Tab One">
	<ion-content>Tab One I am</ion-content>

Sounds cool, and when I click on Tabs in the side menu, I do see Tab One, so far so good!
Now I click Tab Two from the main view… and I see… Tab Two, yay!
Now I click Tab One and… nothing happens! :frowning:
Basically I’m stuck on that Tab Two at this point.

More interesting is that I can still open the side-menu, go to another view, but once I’m on another view, I cannot go back to the Tabs view.
Clicking on Tabs in the side-menu doesn’t change the content of the page any more.
I can go to other, non-tabbed views…

Any luck to make tabbed views work as views opened from a side-menu in ionic beta 14?


gulp sass solved the issue…
Never forget to rebuild the styles after upgrading… :s (npm lib update could do it!)

I got the same issue and tried the gulp sass. Still don’t know how to resolve it.
Could you provide the steps of solved ?

I don’t remember exactly, but cleanup your output folder, be sure the styles you use in your index.html are the ones compiled by the gulp sass command (mine wasn’t) and rebuild.
If still doesn’t work, please post a codepen example of the issue.