Ionic angular multiple nested and abstract states

Question

I was working on an application that requires 2 abstract states with nested states, below is an example configuration

$stateProvider .state('app', { url: "/app", abstract: true, templateUrl: "templates/menu.html", controller: "AppController" }) .state('app.screenList', { url: "/app/screenList", views: { 'menuContent': { templateUrl: "templates/screenList.html", controller: "ScreenListController" } } }) .state('app.screen1', { url: "/app/screen1", views: { 'menuContent': { templateUrl: "templates/screen1.html", controller: "Screen1Controller" } } }) .state('app.subapp', { url: "/app/subapp", abstract: true, views: { 'menuContent': { templateUrl: "templates/subapp.html", controller: "SubAppController" } } }) .state('app.subapp.screen1', { url: "/app/subapp/screen1", views: { 'subappContent': { templateUrl: "templates/subappscreen1.html", controller: "SubAppScreen1Controller" } } }) 

The screenList displays a list of selected screens. When the next navigation happens, everything works fine

screenList > screen1 Press the return key and then subapp.screen1

Clicking on this step works.

Interestingly, when I try to perform the following navigation, the back stops responding and nothing happens.

screenList > screen1 Press the back key and then subapp.screen1 press the back key and then subapp.screen1 again (at this point, pressing the back key does not work. Even the application does not exit.)

I don’t know at all why this is happening, the only conclusion I came to is that if I consistently try to enter subapp.screen1 , the problem arises. If I continue to switch between subapp.screen1 and screen1 , everything works correctly.

I want the back key to react no matter how the state was switched.

Answer 1

Based on this post , I finally did my best.

In tabs.html I declare a tab as follows:

  <ion-tab title="ServOOps Mobile" icon="ion-person-stalker" ui-sref="app.tabs.external-index"> <ion-nav-view name="tab-servicos"></ion-nav-view> 

And in app.js , I put it like this:

 .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.tabs.external-index', { url: '/external-index', views: { 'menuContent': { templateUrl: 'templates/external-index.html', controller: 'ExternalIndexCtrl' }, 'tab-servicos': { templateUrl: 'templates/external-index.html', controller: 'ExternalIndexCtrl' } } }) 

And it works great. Now I have a side menu and my tabs on this page.

You need to reproduce this for other tabs.

And remember that in this I bind the external index to the tabs, so now the link to the page will be #/app/tabs/external-index.html .