Как определить, будет ли пользователь нажимать кнопку "Назад" браузера в 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 (все в прямом направлении), и будет казаться, что пользователь ушел "назад", но для наши потребности это работает.