Angularjs 如何获取离子标签页中的“返回”按钮_Angularjs_Ionic Framework

Angularjs 如何获取离子标签页中的“返回”按钮

angularjs ionic-framework

Angularjs 如何获取离子标签页中的“返回”按钮,angularjs,ionic-framework,Angularjs,Ionic Framework,我用的是离子型的。当我从主页导航到选项卡页面时，“后退”按钮消失，一旦进入选项卡页面，我就无法返回主页。我试图在线搜索，但找不到解决方案。是否有任何解决方法，或者我在哪里做错了。这是我的密码 index.html <html data-ng-app="tabsBack"> <head> <meta charset="utf-8" /> <title>BlankCordovaApp1</title> <!

我用的是离子型的。当我从主页导航到选项卡页面时，“后退”按钮消失，一旦进入选项卡页面，我就无法返回主页。我试图在线搜索，但找不到解决方案。是否有任何解决方法，或者我在哪里做错了。这是我的密码 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>


BlankCordovaApp1
var app=angular.module（'tabsBack'，['ionic']）；
app.config（函数（$stateProvider，$urlRouterProvider）{
$stateProvider
.州（“家”{
网址：“/”，
templateUrl:“home.html”
})
.state（'tab'{
url:“/tab”，
templateUrl:“tab.html”
})
.state（'tab.one'{
url:“/one”，
观点：{
“表一”：{
templateUrl:'templates/tab one.html'，
}
}
})
.state（'表二'{
url:“/two”，
观点：{
“表二”：{
templateUrl:'templates/tab two.html'，
}
}
})
$urlRouterProvider。否则（'/'）；
})
返回

Home.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-2.html

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


两个

通过将“后退”按钮手动添加到选项卡页面，最终使其正常工作。在ng单击后退按钮的事件中使用了

$ionicGoBack（$event）

。这是完整的。到目前为止，我没有遇到任何问题。

@mahindar这只是一个解决办法

这个问题已经有了一个公开的问题，那就是在tab-one.html和tab-two.html中使用离子窗格代替离子视图。把它放到你的控制器里。这将强制显示“后退”按钮。不是最优雅的。但它是有效的

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

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

希望这有帮助

您必须将后退按钮添加到每个选项卡中..在tab-one.html中添加了此

back

和控制器

$scope.myGoBack=function（）{$Ionicstory.goBack（）；}它第一次起作用，但当我第二次回到选项卡页面时，背面并没有显示出来。如果有人能帮忙，我会很高兴的。谢谢，请为我们发布一个plunker来复制这个场景？？在这里。单击选项卡链接，然后单击“上一步”，现在再次单击选项卡链接“上一步”按钮将不会出现。我认为标题本身没有更新。