Ion-tabs inside ion-side-menus's ion-nav-view


#1

here is the code of ion-side-menus

<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
        
      </ion-nav-back-button>
      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </ion-nav-buttons>
      <ion-nav-buttons side="right">
        <a href="" class="bell" ng-click="openMassageCenter()">
          <div class="bell-alert"></div>
        </a>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent" animation="slide-left-right-ios7"></ion-nav-view>
  </ion-side-menu-content>

There is a home view with tabs I insert into the code below

<ion-nav-view name="menuContent" animation="slide-left-right-ios7"></ion-nav-view>

Here is the home view

<ion-view view-title="title">
  <ion-content>
    <a class="col home-icon" href="#/index/page-2">
        <img src="../www/img/pic.png" alt="" width="60" height="60">
        <p class="text">Here is a home view</p>
    </a>
  </ion-content>
</ion-view>

Page-2’s view

 <ion-view view-title="title">
    <ion-nav-bar class="bar-stable">
        <ion-nav-back-button>
        </ion-nav-back-button>
        <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
            </button>
        </ion-nav-buttons>
    </ion-nav-bar>

    <ion-tabs class="tabs-striped tabs-color-assertive">
        <ion-tab title="done" href="#/index/home/page-2/page-3">
            <ion-nav-view name="monitor-all"></ion-nav-view>
        </ion-tab>

        <ion-tab title="processed" href="#/index/home/page-2/page-4">
            <ion-nav-view name="monitor-processed"></ion-nav-view>
        </ion-tab>

        <ion-tab title="other" href="#/index/home/page-2/page-5">
            <ion-nav-view name="tab-account"></ion-nav-view>
        </ion-tab>
    </ion-tabs>
</ion-view>

And page-2’s controller

.state(‘index.home’, {
url: “/home”,
views: {
‘menuContent’: {
templateUrl: “templates/home.html”,
controller: ‘HomeCtrl’
}
}
})
.state(‘index.page-2.page-3’, {
url: “/page-3”,
views: {
‘menuContent’: {
templateUrl: “templates/page-3.html”,
controller: ‘PageCtrl’
}
}
})
.state(‘index.page-2/page-4’, {
url: “/page-4”,
views: {
‘menuContent’: {
templateUrl: “templates/page-4.html”,
controller: ‘PageCtrl’
}
}
})
.state(‘index.page-2/page-5’, {
url: “/page-5”,
views: {
‘menuContent’: {
templateUrl: “templates/page-5.html”,
controller: ‘PageCtrl’
}
}
})

It will be something wrong with ion-nav-back-button when I entry to page-2. What’s more, it also be wrong with that when I click the tabs.

How to fixed it ?