How to avoid stacking navigation history in tab-ba

Question

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>

Answer 1

You can intercept the back button in each of your controllers.
From the documentation:

registerBackButtonAction(callback, priority, [actionId]) Register a hardware back button action. Only one action will execute when the back button is clicked, so this method decides which of the registered back button actions has the highest priority.

For example, if an actionsheet is showing, the back button should close the actionsheet, but it should not also go back a page view or close a modal which may be open.

The priorities for the existing back button hooks are as follows: Return to previous view = 100 Close side menu = 150 Dismiss modal = 200 Close action sheet = 300 Dismiss popup = 400 Dismiss loading overlay = 500

Your back button action will override each of the above actions whose priority is less than the priority you provide. For example, an action assigned a priority of 101 will override the 'return to previous view' action, but not any of the other actions.

In your controllers you can register a listener for the back button and exit if it has been pressed:

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

});

NOTES:

Your last tab (C TAB) should have the name: c-tab:

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

Answer 2

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