Override back button to go to specific state using Angular UI Router

Question

I have an Angular app with various different states defined. I do not want the user to be able to go back to previous states using the back button, as they are part of a simulation and it disturbs the simulation flow.

Is there a way I can override the browser back button to take users to the starting state of the simulation?

angular.module('participant').config(function($stateProvider, $urlRouterProvider) { $stateProvider .state('simulations', { url: '/', controller: 'SimulationIndexController', templateUrl: '/angular_templates/simulations/index.html', }) .state('simulation.content', { // other routes });

I want to go to the 'simulations' state when the user presses the back button on the browser but I am not sure how to accomplish this.

you should also select an answer.

Sampgun
– Sampgun

2018-07-05 13:33:50 +00:00
Commented Jul 5, 2018 at 13:33 — Sampgun
– Sampgun, Commented Jul 5, 2018 at 13:33

georgeawg · Accepted Answer · 2017-06-30 21:30:33Z

Use location: 'replace' when doing state transitions:

$state.go("simulation.content.state2",{location:'replace'});

By using the replace option, the individual simulation steps will not be stored in the browser history. When the user hits the back button, the user will be taken back to the beginning instead of the previous content.

Sampgun · Accepted Answer · 2017-06-30 17:26:07Z

You could add on top

.run(function($state) { $(window).on('popstate', function(event) { // This event fires on current history change $state.go("simulations"); }, false); })

Collectives™ on Stack Overflow

Override back button to go to specific state using Angular UI Router

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related