angularjs - ionic : No back button when navigating away from tab view

Question

当从选项卡式 View 导航到单页 View 时，我无法弄清楚如何显示后退按钮。单页 View 不应该有标签栏。当我将 View 导航到选项卡层次结构的一部分时，我可以使后退按钮出现，但这不是我想要的。

我一直在环顾四周，似乎无法找到有关此问题的帖子。我只是可能没有搜索正确的关键字。

我的设置是这样的...

标签:tab.feed、tab.friends、tab.account

其他 View :随机页面

这是我设置的路线...

.state('randompage', {
    url:'/randompage',
    templateUrl: 'templates/randompage.html',
    controller: 'RandomPageCtrl'
})

.state('tab', {
  url: '/tab',
  abstract: true,
  templateUrl: 'templates/tabs.html',
  controller: 'TabCtrl'
})

.state('tab.feed', {
  url: '/feed',
  views: {
    'tab-feed': {
      templateUrl: 'templates/tab-feed.html',
      controller: 'FeedCtrl'
    }
  }
})

这是tabs.html

<ion-tabs class="tabs-icon-top tabs-top">
    <!-- Feed Tab -->
    <ion-tab title="Feed" icon="icon ion-ios7-paper" href="#/tab/feed">
        <ion-nav-view name="tab-feed"></ion-nav-view>
    </ion-tab>

    <!-- The rest are just from the tab skeleton -->
    <ion-tab title="Friends" icon="icon ion-heart" href="#/tab/friends">
        <ion-nav-view name="tab-friends"></ion-nav-view>
    </ion-tab>

    <ion-tab title="Account" icon="icon ion-gear-b" href="#/tab/account">
        <ion-nav-view name="tab-account"></ion-nav-view>
    </ion-tab>
</ion-tabs>

这是 tab-feed.html

<ion-view title="Feed">
    <ion-nav-buttons side="right">
        <a class="button button-icon ion-android-camera" href="#/randompage"></a>
    </ion-nav-buttons>
    <ion-content class="padding">
        <h1>Feed</h1>
    </ion-content>
</ion-view>

这是 randompage.html

<ion-view title="Random Page">
    <ion-content lass="padding">
    </ion-content>
</ion-view>

除了后退按钮未显示外，一切都可以正确导航和显示。

如果您知道任何替代解决方案，可能是我做错了什么，或者需要更多信息，请告诉我。

谢谢!

Answer 1

我有同样的问题。通过检查源代码，ionic 设置了一个名为 root history 的默认历史堆栈，当用户浏览应用程序时， View 会从堆栈中推送和弹出。但是，选项卡 View 将从这个默认历史堆栈中取出，并将为其设置一个新堆栈。

    splash view --> tab view --> random page (out of tab)
                        |
                        tab1 --> nested view (in tab)
                        |
                        tab2 --> nested view (in tab)

root history stack:

    splash view ---> random page

tab history stack:

    tab view ---> tab1 --> nested view
             ---> tab2 --> nested view

I couldn't find an easy way to change this behavior. But there's a workaround work for my case. I created a normal ionic view and composed the tab view by myself so no new history stack will be created.

<ion-view title="tabs">
    <ion-content padding="false">
        <ion-pane>
            <ion-nav-view name="tab-content"></ion-nav-view>
        </ion-pane>
        <div class="tabs tabs-icon-top" style="position: absolute;bottom: 0;">
            <a class="tab-item">
                <i class="icon ion-home"></i>
                Home
            </a>
            <a class="tab-item">
                <i class="icon ion-star"></i>
                Favorites
            </a>
            <a class="tab-item">
                <i class="icon ion-gear-a"></i>
                Settings
            </a>
        </div>
    </ion-content>
</ion-view>

然后您可以设置您的 $stateProvider 以将不同的选项卡 View 加载到选项卡内容中以模仿 ionic 选项卡的行为。当然，您必须自己维护选项卡的事件状态。