Эквивалентность window.onbeforeunload в AngularJS для маршрутов

У обычного JavaScript есть window.onbeforeunload. Как эмулировать то же самое в AngularJS с помощью маршрутов HTML5?

Существует $beforeRouteChange, но он не позволяет вам отменить событие, насколько я могу судить.

Чтобы уточнить: window.onbeforeunload будет работать для перехода от страницы, но не для внутристраничной навигации, например. переход от одного контроллера к другому только через API истории HTML5.

Ответы

Ответ 1

Существует событие $locationChangeStart, которое можно отменить.

Поскольку он еще не задокументирован, вот unit test, описывающий, как он влияет на службу $route. https://github.com/angular/angular.js/blob/v1.0.1/test/ng/routeSpec.js#L63

Это не дает подтверждения для пользователя, такого как window.onbeforeunload. Вам нужно принести свой собственный диалог и перезапустить процесс изменения местоположения, чтобы получить тот же эффект (или вы могли бы просто использовать синхронный $window.confirm).

Ответ 2

Добавьте это:

$scope.$on('$destroy', function() {
   window.onbeforeunload = undefined;
});
$scope.$on('$locationChangeStart', function(event, next, current) {
   if(!confirm("Are you sure you want to leave this page?")) {
      event.preventDefault();
   }
});

Ответ 3

Если вы используете angular -ui-router, вам нужно использовать $stateChangeStart вместо $locationChangeStart.