How to detect if a user clicks browser back button in Angularjs

Question

I have a form-like page with some data. And want to show a popup/alert when a user clicks the browser back button, asking \"if they want to go back or stay on the same page\

Answer 1

You'd be better off using $stateChangeStart event with angular ui router. There will be problems with $routeChangeStart as $routeChangeStart event will be triggered when the url changes.

For example:

You have 4 states, each with 2 sub-state, and each sub/state or state is not associated with a url. In such cases listening to $routeChangeStart might not work.

In the controller/view where you want to prompt the user to confirm the redirection do this.

This will be called when the state changes in your current scope (which is the view/controller that you are in)

$scope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
    //Open the modal
    $('my-modal').show();
});

Answer 2

Here is my solution

app.run(function($rootScope, $location) {
    $rootScope.$on('$locationChangeSuccess', function() {
        if($rootScope.previousLocation == $location.path()) {
            console.log("Back Button Pressed");
        }
        $rootScope.previousLocation = $rootScope.actualLocation;
        $rootScope.actualLocation = $location.path();
    });
});

Answer 3

This is my previous answer for some other question, but it should be good to help you

You can do it by using angular $routeChangeStart

$routeChangeStart

Broadcasted before a route change. At this point the route services start resolving all of the dependencies needed for the route change to occur. Typically this involves fetching the view template as well as any dependencies defined in resolve route property. Once all of the dependencies are resolved $routeChangeSuccess is fired.

The route change (and the $location change that triggered it) can be prevented by calling preventDefault method of the event. See $rootScope.Scope for more details about event object.

---

So please try this below code.

  $scope.$on('$routeChangeStart', function (scope, next, current) {
        if (next.$$route.controller != "Your Controller Name") {
            // Show here for your model, and do what you need**
            $("#yourModel").show();
        }
    });

Update:

You need to write your functional work in the model popup. like

Put some link buttons for

• Are you sure for go to prev page?
• do you want stay current page?
• Do you want logout? etc.

then Add ng-click event for go prev page, stay current page with using return false, etc.

DOES MAKE SENSE DUDE?

Answer 4

Similar to syraz37's answer, but for the new $transition API:

angular
    .module('app')
    .run(function($rootScope, $transitions) {

        // Track "previous state" to be used elsewhere to determine if the user
        // goes "back".
        $transitions.onStart({}, (transition) => {
            if ($rootScope._previousState === transition.$to().name) {
                $rootScope._isPreviousState = true;
            } else {
                $rootScope._isPreviousState = false;
            }
            $rootScope._previousState = transition.$from().name;
        });

    });

Then in any controller, you can check if it's being loaded as the "previous state":

if ($rootScope._isPreviousState) {
    // ...reload some aspect of the controller state...
}

This falls to the caveat pointed out by ninjaPixel above where you could go to state A, then state B, then state A again (all in a forward direction) and it would think the user has gone "back", but for our needs this works.