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

Я 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 = [];
6 56
javascript angularjs angularjs-directive model-view-controller

6 ответов:

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

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

Давайте разделим ваш вопрос, вы спрашиваете о двух разных вещах:

1.

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

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

вот директива, которую я использую. Он автоматически очищает себя, когда форма выгружается. Если вы хотите предотвратить запуск приглашения (например, потому что вы успешно сохранили форму), вызовите $scope.Имя формы.$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();
                }
            });
        }
    };
}]);
22

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

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

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

9

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

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

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

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

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

перезагрузить страницу: с помощью init

-1