How to avoid stacking navigation history in tab-bar states


#1

Hi everyone,

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>

Proper tab routing for a home screen and avoiding a large navigation stack
#2

I solved my problem. Additional details in here