Отображение предупреждения в angularjs, когда пользователь покидает страницу

Я - новая пчела. Я пытаюсь написать подтверждение, которое предупреждает пользователя, когда он пытается закрыть окно браузера.

У меня есть 2 ссылки на моей странице v1 и v2.При нажатии на ссылки, которые она принимает на определенные страницы. Вот код для перенаправления на v1 и v2

angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives'])

.config(['$routeProvider', function($routeProvider) {
        $routeProvider.when('/v1', {templateUrl: 'pages/v_1.html', controller: MyCtrl1});
        $routeProvider.when('/v2', {templateUrl: 'pages/v_2.html', controller: MyCtrl2});
        $routeProvider.otherwise({redirectTo: '/v1'});
}]);

Я хочу вывести сообщение, когда пользователь нажимает на v1, чтобы "он собирался уйти из v1, если он хочет продолжить" и при нажатии на v2. Любые указатели на то, как достичь этого, будут оценены.

Я получил ответ здесь, но он выдает сообщение после каждого интервала времени.

Обновленный код;

Контроллеры

function MyCtrl1() {
    $scope.$on('$locationChangeStart', function (event, next, current) {
        if ('your condition') {
            event.preventDefault();

            MessageService.showConfirmation(
                'Are you sure?',
            MessageService.MessageOptions.YES_NO, {
                'YES': function () {
                    blockNavigation = false;
                    $location.url($location.url(next).hash());
                    $rootScope.$apply();
                },
                'NO': function () {
                    MessageService.clear();
                    $log.log('NO Selected')
                }
            });
        }
    });
}
MyCtrl1.$inject = [];


function MyCtrl2() {}
MyCtrl2.$inject = [];

Ответ 1

Код для диалога подтверждения можно записать короче:

$scope.$on('$locationChangeStart', function( event ) {
    var answer = confirm("Are you sure you want to leave this page?")
    if (!answer) {
        event.preventDefault();
    }
});

Ответ 2

Позволяет разделить ваш вопрос, вы спрашиваете о двух разных вещах:

Я пытаюсь написать проверку, которая предупреждает пользователя, когда он пытается для закрытия окна браузера.

Я хочу вывести сообщение, когда пользователь нажимает на v1, что "он о уйти из v1, если он хочет продолжить" и при нажатии на v2.

Для первого вопроса сделайте это так:

window.onbeforeunload = function (event) {
  var message = 'Sure you want to leave?';
  if (typeof event == 'undefined') {
    event = window.event;
  }
  if (event) {
    event.returnValue = message;
  }
  return message;
}

И для второго вопроса сделайте так:

Вы должны обработать событие $locationChangeStart, чтобы подключиться для просмотра события перехода, поэтому используйте этот код для обработки проверки перехода в контроллере /s:

function MyCtrl1($scope) {
    $scope.$on('$locationChangeStart', function(event) {
        var answer = confirm("Are you sure you want to leave this page?")
        if (!answer) {
            event.preventDefault();
        }
    });
}

Ответ 3

Вот директива, которую я использую. Он автоматически очищается, когда форма выгружается. Если вы хотите запретить запуск приглашения (например, потому что вы успешно сохранили форму), вызовите $scope.FORMNAME. $SetPristine(), где FORMNAME - это имя формы, которую вы хотите предотвратить из приглашения.

.directive('dirtyTracking', [function () {
    return {
        restrict: 'A',
        link: function ($scope, $element, $attrs) {
            function isDirty() {
                var formObj = $scope[$element.attr('name')];
                return formObj && formObj.$pristine === false;
            }

            function areYouSurePrompt() {
                if (isDirty()) {
                    return 'You have unsaved changes. Are you sure you want to leave this page?';
                }
            }

            window.addEventListener('beforeunload', areYouSurePrompt);

            $element.bind("$destroy", function () {
                window.removeEventListener('beforeunload', areYouSurePrompt);
            });

            $scope.$on('$locationChangeStart', function (event) {
                var prompt = areYouSurePrompt();
                if (!event.defaultPrevented && prompt && !confirm(prompt)) {
                    event.preventDefault();
                }
            });
        }
    };
}]);

Ответ 4

Как вы обнаружили выше, вы можете использовать комбинацию window.onbeforeunload и $locationChangeStart для сообщения пользователя. Кроме того, вы можете использовать ngForm.$dirty только для сообщения пользователя, когда они вносили изменения.

Я написал директиву angularjs, которую вы можете применить к любой форме, которая будет автоматически следить за изменениями и сообщать пользователю, если они перезагружают страницу или перемещаются. @see https://github.com/facultymatt/angular-unsavedChanges

Надеюсь, вы найдете эту директиву полезной!

Ответ 5

Другие примеры здесь отлично подходят для старых версий ui-router ( >= 0.3.x), но все события состояния, такие как $stateChangeStart, устарел от 1.0. Новый код ui-router 1.0 использует службу $переходов. Поэтому вам нужно вставить $transitions в свой компонент, а затем использовать метод $transitions.onBefore, как показывает приведенный ниже код.

$transitions.onBefore({}, function(transition) {
  return confirm("Are you sure you want to leave this page?");
});

Это просто супер простой пример. Служба $transitions может принимать более сложные ответы, такие как promises. Для получения дополнительной информации см. HookResult type.

Ответ 6

$scope.rtGo = function(){
            $window.sessionStorage.removeItem('message');
            $window.sessionStorage.removeItem('status');
        }

$scope.init = function () {
            $window.sessionStorage.removeItem('message');
            $window.sessionStorage.removeItem('status');
        };

Обновить страницу: с помощью init