Question

标签A - 标签B - 标签C

以下国家; tabs.a，tabs.b，tab.c

我希望关闭应用，例如在切换每个标签状态时没有导航历史记录

例如：我在选项卡A中然后单击选项卡B然后我从现在开始点击选项卡C，如果用户按下应用程序应该关闭的按钮。在正常行为中，导航历史记录堆叠起来，如果我按下按钮，我将从标签C转到标签B.如何避免此行为

以下是我的代码;

.state('tabs', {
                url: "/tab",
                abstract: true,
                templateUrl: "templates/tabs.html"
            })
            .state('tabs.a', {
                url: "/a",
                views: {
                    'a-tab': {
                        templateUrl: "templates/a.html",
                        controller: 'AController'
                    }
                }
            }).state('tabs.b', {
                url: "/b",
                views: {
                    'b-tab': {
                        templateUrl: "templates/b.html",
                        controller: 'BController'
                    }
                }
            }).state('tabs.c', {
                url: "/c",
                views: {
                    'c-tab': {
                        templateUrl: "templates/c.html",
                        controller: 'CController'
                    }
                }
            });

<ion-tabs class="tabs-royal tabs-striped">
    <ion-tab title="A" href="#/tab/a">
        <ion-nav-view name="a-tab"></ion-nav-view>
    </ion-tab>
    <ion-tab title="B" href="#/tab/b">
        <ion-nav-view name="b-tab"></ion-nav-view>
    </ion-tab>
    <ion-tab title="C" href="#/tab/c">
        <ion-nav-view name="b-tab"></ion-nav-view>
    </ion-tab>
</ion-tabs>

Answer 1

您可以截取每个控制器中的后退按钮来自documentation：

registerBackButtonAction（callback，priority，[actionId]）注册一个   硬件后退按钮动作。只有一个动作才能执行   单击后退按钮，因此此方法决定注册了哪个   后退按钮操作具有最高优先级。

例如，如果显示动作表，则应该返回后退按钮   关闭动作表，但它不应该返回页面视图或   关闭一个可能开放的模态。

现有后退按钮挂钩的优先级如下：   返回上一个视图= 100关闭侧边菜单= 150关闭模式=   200关闭操作表= 300关闭弹出= 400关闭加载   overlay = 500

您的后退按钮操作将覆盖上述每个操作   优先级低于您提供的优先级。例如，一个动作   分配优先级101将覆盖'返回上一个视图'   行动，但不是任何其他行动。

在您的控制器中，您可以为后退按钮注册一个监听器，如果已按下则退出：

.controller('AController', function($scope, $ionicPlatform){
    var deregister = $ionicPlatform.registerBackButtonAction(
            function () {
                ionic.Platform.exitApp();
            }, 100
    );
    $scope.$on('$destroy', deregister)    
})    

.controller('BController', function($scope, $ionicPlatform){
    var deregister = $ionicPlatform.registerBackButtonAction(
            function () {
                ionic.Platform.exitApp();
            }, 100
    );
    $scope.$on('$destroy', deregister)    


})

.controller('CController', function($scope, $ionicPlatform){
  var deregister = $ionicPlatform.registerBackButtonAction(
            function () {
                ionic.Platform.exitApp();
            }, 100
    );
    $scope.$on('$destroy', deregister)    

});

备注：

您的上一个标签（C TAB）的名称应为：c-tab：

<ion-tab title="C" href="#/tab/c"> <ion-nav-view name="c-tab"></ion-nav-view> </ion-tab>

Answer 2

我用一种简单的方法完成了它在制表符状态

的控制器范围中添加了一个功能

.state('tabs', {
                url: "/tab",
                abstract: true,
                templateUrl: "templates/tabs.html",
                controller: function($scope, $ionicTabsDelegate, $ionicHistory) {
                    $scope.rt = function(e, index) {
                        $ionicTabsDelegate.select(index);
                        //e.preventDefault();
                        $ionicHistory.nextViewOptions({historyRoot:true});
                    }
                }
            })

并添加ng-click on tabs.html模板中的每个ion-tab指令，如下所示;

<ion-tab ng-click="rt($event, 0)" title="A" href="#/tab/a">

rt函数的第二个参数是tab的索引

我使用了$ ionicHistory.nextViewOptions（{historyRoot：true}）;

来自documentation

<强> nextViewOptions（）
  设置下一个视图的选项。这种方法可以   在a之前覆盖某些视图/转换默认值很有用   视图过渡发生。例如，menuClose指令使用   内部的此方法可确保动画视图过渡不会   当侧面菜单打开时发生，并且还将下一个视图设置为   历史堆栈的根。转换后，将设置这些选项   回到空。

可用选项：

disableAnimate：不要为下一次转换设置动画    disableBack：下一个视图应该忘记其后视图，并将其设置为null    historyRoot：下一个视图应成为其历史记录堆栈中的根视图。

这样我实现了我想要的目标

如何避免在标签栏状态中堆叠导航历史记录

2 个答案: