Question

我无法弄清楚当从选项卡式视图导航到单个页面视图时如何显示后退按钮。单页面视图不应该有标签栏。我可以在制作视图时显示后退按钮我正在导航到选项卡层次结构的一部分，但这不是我想要的。

我一直在环顾四周，似乎找不到关于这个问题的帖子。我可能不会搜索正确的关键字。

我的设置就是这个......

标签：tab.feed，tab.friends，tab.account

其他观点：randompage

这是我的路线设置......

.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

这对我来说也是一个长期问题。虽然在这个用例中打破了历史堆栈，但是＃back;＆＃39;在历史对象中是正确的。使用此日志行可以看到完整的历史记录对象：

console.log( JSON.stringify($ionicHistory.viewHistory(), null, 4) );

我的解决方案是手动添加全局页面上的“后退”按钮。

全球网页html：

<ion-view view-title="Help">

<ion-nav-buttons side="left">
 <button class="button button-clear" ng-click="goBack()"><i class="icon ion-arrow-left-c" ></i> Back</button>
</ion-nav-buttons>

使用Javascript：

$scope.goBack = function() {
    $ionicHistory.goBack();
};

另一种选择是改变离子源。用ionic：

替换ionic.bundle.js中的enabledBack（）

enabledBack: function(view) {
  //original code
  //var backView = getBackView(view);
  //return !!(backView && backView.historyId === view.historyId);

  //new code to show back
  var backView = viewHistory.backView;
  return backView != null;
},

Answer 2

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


    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 view ---> tab1 --> nested view
             ---> tab2 --> nested view

我无法找到改变这种行为的简单方法。但是我的案例有一个变通办法。我创建了一个普通的离子视图，并由我自己组成了标签视图，因此不会创建新的历史堆栈。

<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以将不同的选项卡视图加载到tab-content中以模仿ion-tabs行为。当然，你必须自己维护标签的活动状态。

Answer 3

对不起，我没有足够的声誉来添加评论。

Ryan的回答对我来说就像一个魅力（不是修改离子源部分），我只想添加一个点，如果使用

ng-click="$ionicGoBack()"

而不是

ng-click="goBack()"

可以省略Javascript。

离子：从标签视图导航时没有后退按钮

3 个答案: