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

3

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.

answered Jun 30, 2017 at 21:30

georgeawg

49k13 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

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

1

You could add on top

.run(function($state) {

    $(window).on('popstate', function(event) {
        // This event fires on current history change

        $state.go("simulations");

    }, false);

})

answered Jun 30, 2017 at 17:26

Sampgun

3,0323 gold badges23 silver badges39 bronze badges

1 Comment

Sampgun Over a year ago

I think it's worth a try!

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related