如何避免在标签栏状态叠加导航历史 [英] How to avoid stacking navigation history in tab-bar states

问题描述

选项卡 - 选项卡乙 - 扣C

国象下面;
tabs.a，tabs.b，tab.c

我要关闭应用程序，就像没有在每个选项卡状态切换时，导航历史

例如：我是在选项卡，然后我点击选项卡B，然后我从现在起，如果用户按下后退按钮的应用程序应该关闭点击为制表℃。在正常的行为导航历史堆叠起来，如果我按后退按钮，我会从标签C.转到选项卡B如何避免此行为

下面是我的codeS;

.STATE（'标签'，{
                网址：/标签
                摘要：真实，
                templateUrl：模板/ tabs.html
            }）
            .STATE（'tabs.a'，{
                URL：/ A，
                观点：{
                    一个标签：{
                        templateUrl：模板/ a.html
                        控制器：'AController
                    }
                }
            }）。状态（'tabs.b'，{
                网址：/ B，
                观点：{
                    B-标签：{
                        templateUrl：模板/ b.html
                        控制器：'BController
                    }
                }
            }）。状态（'tabs.c'，{
                网址：/ C，
                观点：{
                    C-标签：{
                        templateUrl：模板/ c.html
                        控制器：'的CController
                    }
                }
            }）;


＆LT;离子标签类=标签皇家标签条纹＆GT;
    ＆LT;离子分页标题=AHREF =＃/标签/一个＆GT;
        ＆LT;离子导航视图名称=一个标签＆GT;＆LT; /离子NAV-视图＆gt;
    ＆LT; /离子标签＆gt;
    ＆LT;离子分页标题=B的href =＃/标签/ B＆GT;
        ＆LT;离子导航视图名称=B-标签＆GT;＆LT; /离子NAV-视图＆gt;
    ＆LT; /离子标签＆gt;
    ＆LT;离子分页标题=C的href =＃/标签/ C＆GT;
        ＆LT;离子导航视图名称=B-标签＆GT;＆LT; /离子NAV-视图＆gt;
    ＆LT; /离子标签＆gt;
＆LT; /离子标签＆GT;


解决方案

我有一个简单的方法做了
增加了一个功能选项卡状态的控制范围

.STATE（'标签'，{
                网址：/标签
                摘要：真实，
                templateUrl：模板/ tabs.html
                控制器：函数（$范围，$ ionicTabsDelegate，$ ionicHistory）{
                    $ scope.rt =功能（即指数）{
                        $ ionicTabsDelegate.select（指数）;
                        //e.$p$pventDefault（）;
                        $ ionicHistory.nextViewOptions（{historyRoot：真}）;
                    }
                }
            }）


像下面tabs.html模板每个离子标签指令

和加入NG-点击;

＆LT;离子标签NG点击=RT（$事件，0）称号=AHREF = ＃/标签/一个＆GT;


RT函数的第二个参数是选项卡的索引

我用$ ionicHistory.nextViewOptions（{historyRoot：真}）;

从文档

  

nextViewOptions（）结果
  设置下一个视图选项。这种方法可以
  有用的权利之前替换某些视图/过渡违约率
  视图过渡发生。例如，menuClose指令用途
  此方法在内部，以确保动画视图过渡不
  当发生侧面菜单是开放的，并且还设置下一个视图作为
  它的历史堆栈的根源。转场之后，这些选项设置
  回空。

  
  

可用选​​项：

  
  

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

这样，我取得了我想要的东西。

Tab A - Tab B - Tab C

States like below; tabs.a, tabs.b, tab.c

I want to close app like there is no navigation history when switching in each of tab states

For example: I was in Tab A then I clicked to Tab B and then I clicked to Tab C from now on if user pushes back button the app should close. In normal behaviour navigation history stacks up and if I push back button I'll go to Tab B from Tab C. How to avoid this behaviour

Below is my codes;

.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>

解决方案

I have done it with a simple way Added a function in controller scope of tabs state

.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});
                    }
                }
            })

and added ng-click on each ion-tab directive in tabs.html template like below;

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

The second parameter of rt function is the index of tab

I used $ionicHistory.nextViewOptions({historyRoot:true});

From the documentation

nextViewOptions()
Sets options for the next view. This method can be useful to override certain view/transition defaults right before a view transition happens. For example, the menuClose directive uses this method internally to ensure an animated view transition does not happen when a side menu is open, and also sets the next view as the root of its history stack. After the transition these options are set back to null.

Available options:

disableAnimate: Do not animate the next transition.
disableBack: The next view should forget its back view, and set it to null.
historyRoot: The next view should become the root view in its history stack.

That way I achieved what I want

这篇关于如何避免在标签栏状态叠加导航历史的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！