tab and side menu - links to state does not work

Question

I've built the structure of my application based on this answer:

How to set up sidemenu with tabs in Ionic?

combining side menu and tabs:

my app.js file look like this:

$stateProvider

.state('app', {
 url: '/app',
 abstract: true,
 templateUrl: 'templates/menu.html',
 controller: 'AppCtrl'
})
.state('app.tabs', {
  url: '/tabs',
  views: {
    'menuContent': {
      templateUrl: 'templates/tabs.html'
    }
  }
})
.state('app.tabs1.general', {
  url: '/tabs1-general',
  views: {
    'general-tab': {
      templateUrl: 'templates/general1.html',
      controller: 'General1Ctrl'
    }
  }
})
.state('app.tabs2', {
  url: '/tabs2',
  views: {
    'menuContent': {
      templateUrl: 'templates/tabs2.html'
    }
  }
})
.state('app.tabs2.general', {
  url: '/tabs2-general',
  views: {
    'general2-tab': {
      templateUrl: 'templates/general2.html',
      controller: 'General1Ctrl'
    }
  }
})

$urlRouterProvider.otherwise('/app/ofertas/ofertas-reporte');

everything works fine when I test all routes setting the route at the otherwise method of urlRouterProvider, but when I set the routes at the side bar items the URL's do not match:

Here my menu:

<ion-content>
  <ion-list class="coloredList">
    <ion-item class="sap-color" menu-close href="#/app/tabs1">
      <i class="ion-compose"></i> tabs1
    </ion-item>
   <ion-item class="sap-color" menu-close href="#/app/tabs2">
      <i class="ion-android-star"></i> tabs2
    </ion-item>
 ...

I've tried to ui-sref as well, but nothing seems to work.

Any advice?

Answer 1

It seems like something is wrong with the routes, can you try this :

$stateProvider

.state('app', {
 url: '/app',
 abstract: true,
 templateUrl: 'templates/menu.html',
 controller: 'AppCtrl'
})
.state('app.tabs', {
  url: '/tabs',
  views: {
    'menuContent': {
      templateUrl: 'templates/tabs.html'
    }
  }
})
.state('app.tabs1', {
    url: "/tabs1",
     abstract: true,
     views: {
         'menuContent': {
               templateUrl: "templates/tabs1.html",
                controller: "Tabs1Ctrl"
           }
      }
})
.state('app.tabs1.general', {
  url: '/tabs1-general',
  views: {
    'general-tab': {
      templateUrl: 'templates/general1.html',
      controller: 'General1Ctrl'
    }
  }
})
.state('app.tabs2', {
  url: '/tabs2',
  abstract: true,
  views: {
    'menuContent': {
      templateUrl: 'templates/tabs2.html'
    }
  }
})
.state('app.tabs2.general', {
  url: '/tabs2-general',
  views: {
    'general2-tab': {
      templateUrl: 'templates/general2.html',
      controller: 'General1Ctrl'
    }
  }
})

$urlRouterProvider.otherwise('/app/ofertas/ofertas-reporte');

Answer 2

Checkout this project: https://github.com/mircobabini/ionic-sidemenu-tabs-together I think this does what you need. It's a older project and might need some updating but it will works as a startingpoint. There is a demo in a codepen, the link is on github.