Как определить, будет ли пользователь нажимать кнопку "Назад" браузера в Angularjs

У меня есть форма-подобная страница с некоторыми данными. И хотите показать всплывающее окно/предупреждение, когда пользователь нажимает кнопку "Назад" браузера, спрашивая "если они хотят вернуться или остаться на одной странице". Я использую angular -ui-router $stateProvider и хочу привязать это только к одному состоянию/представлению.

Ответы

Ответ 1

Это мой предыдущий ответ на какой-то другой вопрос, но должно быть хорошо помочь вам

Вы можете сделать это, используя angular $routeChangeStart

$routeChangeStart

Передано до изменения маршрута. На этом этапе службы маршрутизации начинают разрешать все зависимости, необходимые для изменения маршрута. Обычно это включает в себя получение шаблона представления, а также любых зависимостей, определенных в свойстве свойства route. Как только все зависимости будут разрешены, $routeChangeSuccess запущен.

Изменение маршрута (и изменение $location, вызвавшее его), можно предотвратить, вызвав метод preventDefault события. Подробнее об объекте события см. $rootScope.Scope.


Итак, попробуйте этот ниже код.

  $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();
        }
    });

Обновление:

Вам нужно написать свою функциональную работу во всплывающем окне модели. как

Поместите некоторые кнопки ссылок для

  • Вы действительно хотите перейти на предыдущую страницу?
  • Вы хотите оставить текущую страницу?
  • Вы хотите выйти из системы? и т.д.

затем Добавить событие ng-click для просмотра предыдущей страницы, сохранить текущую страницу с помощью return false и т.д.

ДЕЛАЕТ СЛУЧАЯ СЛУЖБЫ?

Ответ 2

Вам лучше использовать событие $stateChangeStart с angular ui router. Будут проблемы с $routeChangeStart, поскольку событие $routeChangeStart будет срабатывать при изменении URL-адреса.

Например:

У вас есть 4 состояния, каждый из которых имеет 2 под-состояния, и каждое подчиненное/состояние или состояние не связано с URL-адресом. В таких случаях прослушивание $routeChangeStart может не работать.

В контроллере/представлении, где вы хотите предложить пользователю подтвердить перенаправление, сделайте это.

Это будет вызываться, когда состояние изменяется в вашей текущей области (которая является видом/контроллером, в котором вы находитесь)

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

Ответ 3

Вот мое решение

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();
    });
});

Ответ 4

Аналогично ответу syraz37, но для нового API $transition:

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;
        });

    });

Затем в любом контроллере вы можете проверить, загружается ли он как "предыдущее состояние":

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

Это относится к предостережению, указанному ninjaPixel выше, где вы можете перейти в состояние A, затем в состояние B, затем снова в состояние A (все в прямом направлении), и будет казаться, что пользователь ушел "назад", но для наши потребности это работает.