Откройте модальное окно, прежде чем пользователь уйдет со страницы или обновит страницу

Question

Откройте модальное окно, прежде чем пользователь уйдет со страницы или обновит страницу

0

Я пытаюсь использовать AngularJS ModalsService для открытия модального окна, предупреждающего пользователя о том, что несохраненные изменения в их форме будут потеряны, если они будут перемещаться или обновлять страницу. Он должен спросить их, хотят ли они продолжить, и если они нажмут OK, навигация/перезагрузка должны произойти по-прежнему, если они нажмут "Отменить", она должна закрыть модальную и остановить навигацию/перезагрузку.

У меня есть директива, которая создает окно, когда это происходит, но окно игнорирует мой стиль приложений.

Директива acConfirmExit

(function () {
'use strict';

angular.module('SomeModule').directive('acConfirmExit', function () {
    return {
        scope: {
            acConfirmExit: '&',
            confirmMessageWindow: '@',
            confirmMessageRoute: '@',
            confirmMessage: '@'
        },
        link: function ($scope, elem, attrs) {
            window.onbeforeunload = function () {
                if ($scope.acConfirmExit()) {
                    // Launch modal instance
                    return $scope.confirmMessageWindow || $scope.confirmMessage;
                }
            }
            var $locationChangeStartUnbind = $scope.$on('$locationChangeStart', function (event) {
                if ($scope.acConfirmExit()) {
                    if (!confirm($scope.confirmMessageRoute || $scope.confirmMessage)) {
                        event.preventDefault();
                    }
                }
            });

            $scope.$on('$destroy', function () {
                window.onbeforeunload = null;
                $locationChangeStartUnbind();
            });
        }
    };
});
}());

HTML

<div ac-confirm-exit="dirty" 
confirm-message-window="Unsaved changes to this DataDoc. All your changes will be lost." 
confirm-message-route="Unsaved changes to this DataDoc.  Leave this page without saving your changes?"></div>

EDIT: Извинения я не был ясен, я хочу использовать модальное всплывающее окно, а не стандартное окно браузера, который открывается. Я просто не уверен, как использовать модальное окно с window.onbeforeunload и $ locationChangeStart.

Connor McGill 05 нояб. 2015, в 13:45

Источник

0

Вы используете UI-роутер или стоковую угловую маршрутизацию?
Andrew Cavanagh 05 нояб. 2015, в 13:11
0

стоковая угловая маршрутизация
Connor McGill 05 нояб. 2015, в 13:19

Теги:

javascript

html

angularjs

bootstrap-modal

1 ответ

Ещё вопросы

Вы используете UI-роутер или стоковую угловую маршрутизацию?

Marks · Answer 1 · 2015-11-05T10-07-00.000Z

возможно, потому, что ваш код не имеет углового контекста, они находятся в необработанном оконном событии "onbeforeunload".

window.onbeforeunload = function () {
    if ($scope.acConfirmExit()) {
        // Launch modal instance
        return $scope.confirmMessageWindow || $scope.confirmMessage;
    }
}

попробуйте ввести $ window и код:

// inject $window
angular.module('SomeModule').directive('acConfirmExit', function ($window) {

// listen onbeforeunload with $window
$window.onbeforeunload = function () {
    if ($scope.acConfirmExit()) {
        // Launch modal instance
        return $scope.confirmMessageWindow || $scope.confirmMessage;
    }
}