Ionic tabs and side menu navigation issue

Question

I learn and try to create an ionic app with tabs combining the side menu.

Here is what it looks like (Codepen):

The side-menu part is okay. There is an additional link on my home page. Here is my problem: After clicking the link, I can go back to the previous page only through the back button. And my home tab doesn't work. I try to add another link to my about page, and either back button or home tab could go back to the previous page, which is the home page.

Here is my .js file:

angular.module('demo', ['ionic'])

.config(function ($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('/')

  $stateProvider
    .state('home', {
      url: '/home',
      templateUrl: 'home.html'
    })

    .state('about', {
      url: '/about',
      templateUrl: 'about.html'
    })

    .state('contact', {
      url: '/contact',
      templateUrl: 'contact.html'
    })
})

.controller('MyCtrl', function ($scope, $ionicSideMenuDelegate) {
  $scope.showRightMenu = function () {
    $ionicSideMenuDelegate.toggleRight();
  };
});

I looked for other similar issues and tried to switch the href to ui-sref. The home tab still doesn't work. Did I miss something?

And here is my .html:

<body ng-app="demo" ng-controller="MyCtrl">

<ion-side-menus>
  <ion-side-menu-content>
    <ion-nav-bar class="bar-positive nav-title-slide-ios7">
      <ion-nav-back-button class="button-clear">
        <i class="ion-arrow-left-c"></i> Back </ion-nav-back-button>
    </ion-nav-bar>

    <ion-nav-view></ion-nav-view>

    <ion-tabs class="tabs-icon-top tabs-positive">
      <ion-tab title="Home" icon="ion-home" ui-sref="home">
        <ion-nav-view name="home"></ion-nav-view>
      </ion-tab>

      <ion-tab title="About" icon="ion-ios-information" ui-sref="about">
        <ion-nav-view name="about"></ion-nav-view>
      </ion-tab>

      <ion-tab title="Setting" icon="ion-navicon" ng-click="showRightMenu()">
      </ion-tab>
    </ion-tabs>
  </ion-side-menu-content>

  <ion-side-menu side="right">
    <ion-header-bar class="bar-dark">
      <h1 class="title">Setting</h1>
    </ion-header-bar>

    <ion-content has-header="true">
      <ion-list>
        <ion-item>Setting</ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

<script id="home.html" type="text/ng-template">
  <ion-view view-title="Home">
    <ion-content class="padding">
      <a class="button button-stable button-block" ui-sref="contact">Contact</a>
      <a class="button button-stable button-block" ui-sref="about">About</a>
    </ion-content>
  </ion-view>
</script>

<script id="about.html" type="text/ng-template">
  <ion-view view-title="About">
    <ion-content class="padding">
    </ion-content>
  </ion-view>
</script>

<script id="contact.html" type="text/ng-template">
  <ion-view view-title="Contact">
    <ion-content class="contactBg" scroll="false">
    </ion-content>
  </ion-view>
</script>

Answer 1

Tabs have history only when you navigate to a sub item; a child element in the tab. That's the only situation when you should have a back button inside a tab.

First thing I've noticed, you're referencing an old version of the framework:

<link href="http://code.ionicframework.com/1.0.0-beta.14/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0-beta.14/js/ionic.bundle.min.js"></script>

I would suggest to use the latest, stable:

<link href="http://code.ionicframework.com/1.1.0/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.1.0/js/ionic.bundle.min.js"></script>

Then you're trying to wrap everything inside a big container.

Normally what you would do is create a menu (menu.html):

<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-positive nav-title-slide-ios7">
      <ion-nav-back-button>
      </ion-nav-back-button>
      <!--
      <ion-nav-buttons side="right">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="right">
        </button>
      </ion-nav-buttons>
      -->
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="right">
    <ion-header-bar class="bar-dark">
      <h1 class="title">Settings</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
                <ion-item nav-clear href="#">
          Settings
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

Where you have a <ion-nav-view name="menuContent"></ion-nav-view>. That's the place where all the views will be loaded.

I've hidden the navigation button for the menu so you won't see it:

<!--
<ion-nav-buttons side="right">
    <button class="button button-icon button-clear ion-navicon" menu-toggle="right"></button>
</ion-nav-buttons>
-->

Then you would have your tabs container (tabs.html):

<ion-view view-title="Tabs">
  <ion-tabs class="tabs-icon-top tabs-positive">
    <ion-tab title="Home" icon-on="ion-ios-home" icon-off="ion-ios-home-outline" ui-sref="app.tabs.home">
      <ion-nav-view name="home"></ion-nav-view>
    </ion-tab>

    <ion-tab title="About" icon-on="ion-ios-information" icon-off="ion-ios-information-outline" ui-sref="app.tabs.about">
      <ion-nav-view name="about"></ion-nav-view>
    </ion-tab>

    <ion-tab title="Contact" ui-sref="app.tabs.contact" class="ng-hide">
      <ion-nav-view name="contact"></ion-nav-view>
    </ion-tab>

    <ion-tab title="Setting" icon-on="ion-navicon" icon-off="ion-navicon" ng-click="showRightMenu()"></ion-tab>
  </ion-tabs>
</ion-view>

I've hidden the tab contacts class="ng-hide" cause I don't really understand what you're trying to do there (it will be loaded when you click the button in the home page):

<ion-tab title="Contact" ui-sref="app.tabs.contact" class="ng-hide">
    <ion-nav-view name="contact"></ion-nav-view>
</ion-tab>

Each tab has got its ion-nav-view container where the specific tabs will be loaded:

<ion-nav-view name="home"></ion-nav-view>

You should configure your states so that the menu is the main, abstract state:

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

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

  .state('app.tabs', {
    url: "/tabs",
    views: {
      'menuContent': {
        templateUrl: "tabs.html",
        controller: 'tabsController'
      }
    }
  })

  .state('app.tabs.home', {
    url: "/home",
    views: {
      'home': {
        templateUrl: "home.html",
      }
    }
  })

  .state('app.tabs.about', {
    url: "/about",
    views: {
      'about': {
        templateUrl: "about.html",
      }
    }
  })

  .state('app.tabs.contact', {
      url: "/contact",
      views: {
        'contact': {
          templateUrl: "contact.html"
        }
      }
    });
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/tabs');
});

The state for the tabs container (app.tabs) will be loaded in the menuContent

  .state('app.tabs', {
    url: "/tabs",
    views: {
      'menuContent': {
        templateUrl: "tabs.html",
        controller: 'tabsController'
      }
    }
  })

while all the others (specific tab) will have their own view:

  .state('app.tabs.home', {
    url: "/home",
    views: {
      'home': {
        templateUrl: "home.html",
      }
    }
  })

I've also used a controller for the tabs container => tabsController:

.controller('tabsController', function($scope, $ionicSideMenuDelegate) {

  $scope.showRightMenu = function() {
    $ionicSideMenuDelegate.toggleRight();
  };

});

so you can manage your side-menu.

Roughly your app should look like this.