如何在 Ion-tabs 页面中获取返回按钮答案

【问题标题】：How to get back button in Ion-tabs page如何在 Ion-tabs 页面中获取返回按钮
【发布时间】：2015-02-26 18:56:12
【问题描述】：

我正在使用离子。当我从主页导航到标签页时，“返回”按钮消失了，一旦我进入标签页，我就无法返回主页。我试图在网上搜索，但找不到解决方案。是否有任何解决方法或者我在任何地方都做错了。这是我的代码 index.html

<html data-ng-app="tabsBack">
<head>
    <meta charset="utf-8" />
    <title>BlankCordovaApp1</title>

    <!-- BlankCordovaApp1 references -->
    <link href="css/index.css" rel="stylesheet" />
    <link href="http://code.ionicframework.com/1.0.0-beta.14/css/ionic.min.css" rel="stylesheet" />

    <!-- Cordova reference, this is added to your app when it's built. -->
    <script src="cordova.js"></script>
    <script src="scripts/platformOverrides.js"></script>
    <script src="http://code.ionicframework.com/1.0.0-beta.14/js/ionic.bundle.js"></script>
    <script>
        var app = angular.module('tabsBack', ['ionic']);
        app.config(function ($stateProvider, $urlRouterProvider) {
            $stateProvider
                .state('home', {
                    url: "/",
                    templateUrl: "home.html"
                })
                .state('tab', {
                    url: "/tab",
                    templateUrl: "tab.html"
                })
                .state('tab.one', {
                    url: '/one',
                    views: {
                        'tab-one': {
                            templateUrl: 'templates/tab-one.html',
                        }
                    }
                })
                .state('tab.two', {
                    url: '/two',
                    views: {
                        'tab-two': {
                            templateUrl: 'templates/tab-two.html',
                        }
                    }
                })

            $urlRouterProvider.otherwise('/');
        })
    </script>
    <script src="scripts/index.js"></script>
</head>
<body>
    <ion-nav-bar>
        <ion-nav-back-button class="button-clear">
            <i class="ion-arrow-left-c"></i> Back
        </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view></ion-nav-view>
</body>
</html>

主页.html

<ion-view view-title="home">
    <ion-content>
        home<br />
        <a data-ui-sref="tab">tab</a><br />
    </ion-content>
</ion-view>

tab.html

<ion-tabs class="tabs-icon-top">
    <ion-tab title="One" icon="icon ion-ios7-paper" href="#/tab/one">
        <ion-nav-view name="tab-one"></ion-nav-view>
    </ion-tab>
    <ion-tab title="Two" icon="icon ion-ios7-paper" href="#/tab/two">
        <ion-nav-view name="tab-two"></ion-nav-view>
    </ion-tab>
</ion-tabs>

tab-one.html

<ion-view title="One">
    <ion-content>
        <h1>One</h1>
    </ion-content>
</ion-view>

tab-two.html

<ion-view title="Two">
    <ion-content>
        <h1>Two</h1>
    </ion-content>
</ion-view>

【问题讨论】：

您必须将返回按钮添加到您的每个选项卡中......
在 tab-one.html 添加了这个 <ion-nav-buttons> <button class="button" ng-click="myGoBack()"><i class="ion-arrow-left-c"></i> Back</button> </ion-nav-buttons> 和 controller$scope.myGoBack = function () { $ionicHistory.goBack(); }; 它第一次工作但是当我第二次回到标签页时，后面没有显示。如果有人可以提供帮助，我会很高兴。谢谢
你能发一个plunker让我们复制这个场景吗？？
这里是plnkr.co/edit/BwTzR4mXXsnnF5GvTaZW?p=preview。单击选项卡链接，然后单击返回，现在再次单击选项卡链接，返回按钮将不会出现。我认为标题本身没有更新。

标签： angularjs ionic-framework

【解决方案1】：

最终通过手动将后退按钮添加到标签页来使其正常工作。在返回按钮的 ng-click 事件中使用 $ionicGoBack($event)。这是完整的code。到目前为止，我没有遇到任何问题。

【讨论】：

【解决方案2】：

使用 ion-pane 代替 tab-one.html 和 tab-two.html

中的 ion-view

【讨论】：

【解决方案3】：

@mahindar 这只是一种解决方法。

https://github.com/driftyco/ionic/issues/2997 中已经有针对此问题的未解决问题

【讨论】：

【解决方案4】：

这对我有用。将其放入您的控制器中。这会强制显示“后退”按钮。不是最优雅的。但它有效。

$scope.$on('$ionicView.beforeEnter', function (event, viewData) {
    viewData.enableBack = true;
});

希望有帮助

【讨论】：