首页 文章

使用离子导航后退按钮的离子导航问题

提问于
浏览
0

我有一个基于标签模板的Ionic应用程序 . 我的应用程序的一般导航结构是:

-- users (/users)
    -- user (/users/[id])
-- todos (/todos)
    -- todo (/users/[id])
-- settings (/settings)

那里有一些嵌套视图(用户和待办事项) . 它们出现在相同的导航视图中,如下所示:

<ion-tabs class="tabs-icon-only tabs-color-assertive">
  <ion-tab icon="ion-ios-pulse-strong" href="#/tab/users">
    <ion-nav-view name="users-tab"></ion-nav-view>
  </ion-tab>
  <ion-tab icon="ion-ios-pulse-strong" href="#/tab/todos">
    <ion-nav-view name="todos-tab"></ion-nav-view>
  </ion-tab>
  <ion-tab icon="ion-ios-pulse-strong" href="#/tab/settings">
    <ion-nav-view name="settings-tab"></ion-nav-view>
  </ion-tab>     
</ion-tabs>

随着国家的定义:

.state('tabs', {
    url: '/tab',
    abstract: true,
    templateUrl: 'templates/tabs.html'
  })
  .state('users', {
    url: '/users',
    views: {
      'users-tab': {
        templateUrl: 'templates/tab-users.html',
        controller: 'UsersCtrl'
      }
    }
  })
  .state('tabs.user', {
    url: '/users/:userId',
    views: {
      'users-tab': {
        templateUrl: 'templates/user-detail.html',
        controller: 'UserCtrl'
      }
    }
  })
  .state('todos', {
    url: '/todos',
    views: {
      'todos-tab': {
        templateUrl: 'templates/tab-todos.html',
        controller: 'TodosCtrl'
      }
    }
  })
  .state('tabs.todo', {
    url: '/todos/:todoId',
    views: {
      'todos-tab': {
        templateUrl: 'templates/todo-detail.html',
        controller: 'TodoCtrl'
      }
    }
  })
  .state('tab.settings', {
    url: '/settings',
    views: {
      'settings-tab': {
        templateUrl: 'templates/tab-settings.html',
        controller: 'SettingsCtrl'
      }
    }
  })

在我的index.html文件中,我有以下内容:

<ion-nav-bar class="bar-light">
  <ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>

我利用 ion-nav-back-button 处理de master-detail视图用户和待办事项 . 这完全自动工作,Ionic处理得非常好 . 除一例外 . 当我从另一个视图(例如users / 1)中引用todo的详细视图(例如/ todos / 3)时,后退按钮不会出现,并且无法返回到todos概述(/ todos) ) . 单击选项卡按钮无效,但转到/ todos / 3) .

我想这是预期的行为,但是有没有办法显示后退按钮,或者让标签按钮始终进入待办事项视图(/ todos)?

1 回答

  • 0

    我找到了解决方案 . 它并不理想,但它确实有效 . 而不是直接进入细节状态:

    $state.go('tabs.todos', {
        id: 1
    });
    

    我首先进入主状态,并在承诺中进入详细状态:

    $state.go('tabs.todos').then(function() {
        setTimeout(function() {
            $state.go('tabs.todos', {
                id: 1
            });
        }, 100);
    });
    

    超时并不是绝对必要的,但我发现有时它会在没有它的情况下失败 .

相关问题