Is there a way to clear out the nav-router history and prevent a back button?

ionic-v1
1

Hi,

I am using nav-router throughout my application and everything works good so far with one exception: Inside one of my multilevel views I need to implement a “Back to home” functionality that resets the whole history state in a way.

I am using $location.path('/'); for that but it seems to add a back button to my home view header which is not what I want in this particular case.

How do I get rid of the back button? Is there a way to pop all history stack and prevent a back button on the nav-page header?

I know you guys are migrating to ui-router, but I would love to know if it’s possible to sort this out using the current nav system.

Nick

6 Likes
2

I managed to go around this issue by using hide-back-button="true" in my nav-page element therefore preventing a back button in all cases.

Looking forward to a more straightforward implementation using ui-router.

3 Likes
3

I’m having the same trouble as well. In Angular, I believe we should be able to use $location.replace() to clear all history. Unfortunately, this is not working with Ionic. It still displays the back button after calling this method.

I’ve even tried to change the path with $location.url('/home', true); The true should replace the entire history as well, but no luck.

Anyone have some ideas on a solution or what I’m doing wrong?

1 Like
4

After picking through the IonicNavRouter code, I’ve tried many ways to hide the back button on various pages. Examples :

  • hide-back-button="true"
  • $scope.showBackButton = false;
  • `$scope.enableBackButton = false;
  • $scope.hideBackButton = true;

None of these have worked for me. For now, I’ve come up with a really ugly hack. I put this on each controller that should not have a back button. Unfortunately, it creates a short delay where the back button is show for a second. It also requires $rootScope and $timeout on each of these controllers. It’s the best I can do for now:

$timeout( function() {
    $rootScope.stackCursorPosition = 0;
}, 0);

Is there a better way to be doing this?

1 Like
5

Never mind. I think I finally have hide-back-button="true" working on all my nav-pages. There is still the short delay where the back button exists. I guess there is no way around that.

1 Like
6

This seems to clear the view history:

$rootScope.$viewHistory = {
  histories: { root: { historyId: 'root', parentHistoryId: null, stack: [], cursor: -1 } },
  backView: null,
  forwardView: null,
  currentView: null,
  disabledRegistrableTagNames: []
};

Demo:

However, for some reason when you clear the history two times in a row, the next time you click on a normal link to navigate to a new page, the header title doesn’t animate, it just switches instantly without any animation (check it out in the demo). After that first click, though, it goes back to working normally.

Does anyone have any ideas on how to fix this issue with the header title animation?

2 Likes
7

FYI : You can do this in Js now or with the nav-clear directive.

3 Likes
9

If you are you trying to redirect using $location.path('/'); You will need to use the $ionicViewService to disable the back button on the next view. do this before you change location.

// using the ionicViewService to hide the back button on next view
$ionicViewService.nextViewOptions({
   disableBack: true
});

// Go back to home
$location.path('/');

NOTE: remember to add $ionicViewService as a parameter (i.e where you add $scope, $location etc).

Hope this helps :slight_smile:

13 Likes
10

I’ve used hide-back-button=“true”, but it doesn’t seem to disable the back button on the Android. The icon is not visible. The navigation is still in place and active, but the graphic is hidden. Any way to disable/enable the back nav, but not clear it?

1 Like
11

I had the same problem but I was able to solve it using nav-clear
I’m not using ng-click, I have a side-menu and I wanted to reset the navigation history after a new menu option was selected.

Thanks!
Mauricio

1 Like
12

In my case, I trying to prevent double back buttons within a slider. I can use the hide-back-button=“true” to make the navigation look seamless between an embedded page slider and normal route based page navigation except for the Android back button. It initiates a back route navigation.

1 Like
13

I manage to clear the back stack history with

$rootScope.$viewHistory.backView = null;
1 Like
14

awesome tip. thank you :wink:

1 Like
15

In the upcoming beta 14 the $ionicHistory service makes clearing nav history easy.

I am able to get this to work correctly using the current nightly build (716) -

$ionicHistory.clearHistory();

Remember to inject $ionicHistory in your controller :~)

The $ionicViewService has been replaced I was using the solution provided by @RafGeekee

5 Likes
16

Great, thank you buddy for the tip :smile:

1 Like
17

$ionicHistory.clearHistory(); is just going to delete the history and the back button is gonna be showed without link.
You should also use hide-back-button="true"; on the view directive.

Otherwise, on the controller (for all the links :snail: ):

    $ionicHistory.nextViewOptions({
      disableAnimate: false,
      disableBack: true
    });

Related: https://github.com/driftyco/ionic/issues/1647

At least using “ionic”: “v1.0.0-beta.14”.

It took me a while to figured out it once I updated from 13. I was using nav-clear before…

Cheers,
jaume

7 Likes
18

Thanks! This worked perfectly for me :smile:

1 Like
19

Still have problem with this … :frowning:

I’m using side-menu template for my ionic project.

Using hide-back-button=“true”; I can hide the back button, but that would make my application static! No option to navigate. I want my menu-toggle button back, instead of back button.

Anybody got this to work?

1 Like
20

I have the same issue. I redirect the user to the home screen after they have logged in and instead of the menu button in the top left I have a back button to the login page. I read through several possible solutions but wanted to see if there was a definitive answer to this yet?

Thanks,

Robert

1 Like
21

There is an option to set history root using $ionicHistory. My app has a few onboarding steps. The last step is a sign in step. I go to the main state after user has successfully signed in. This code works well for me. No back button appears.

$ionicHistory.nextViewOptions({
    historyRoot: true
})
$state.go('app.main')
6 Likes