离子角度多个嵌套和抽象状态

Cur*_*ind 5 angularjs angular-ui-router ionic-framework ionic

我一直在研究一个需要2个具有嵌套状态的抽象状态的应用程序,下面是示例配置

$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"
   }
  }
 })
Run Code Online (Sandbox Code Playgroud)

screenList屏幕的显示状态列表中选择.当发生以下导航时,一切正常

screenList > screen1 按返回键然后 subapp.screen1

在这个阶段按回来工作.

有趣的是,当我尝试执行以下导航时,后退停止响应并且没有任何反应.

screenList > screen1按返回键,然后subapp.screen1按返回键然后再按subapp.screen1(在此阶段按后退键无效.即使应用程序也不会退出.)

我完全无能为力,为什么会这样,我得出的唯一结论是,如果我连续尝试进入subapp.screen1,问题就出现了.如果我继续在subapp.screen1和之间切换screen1,一切正常.

我希望无论状态如何切换,后退键都应该响应.

小智 1

基于这篇文章,我终于让事情成功了。

tabs.html我声明一个这样的选项卡:

  <ion-tab title="ServOOps Mobile" icon="ion-person-stalker" ui-sref="app.tabs.external-index">
<ion-nav-view name="tab-servicos"></ion-nav-view>
Run Code Online (Sandbox Code Playgroud)

在 中app.js,我这样写:

.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'
        }
    }
})
Run Code Online (Sandbox Code Playgroud)

这效果很好。现在我在此页面上有了侧面菜单和选项卡。

您必须在其他选项卡上重播此操作。

请记住,在此我将外部索引链接到选项卡,所以现在,到页面的链接将是#/app/tabs/external-index.html.