Question

我尝试使用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>

修改道歉我不清楚，我想使用模态弹出窗口而不是打开的标准浏览器窗口。我只是不确定如何在window.onbeforeunload和$ locationChangeStart中使用模态窗口。

Answer 1

也许是因为您的代码没有角度上下文，它们位于原始窗口事件“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;
    }
}

在用户离开页面或刷新页面之前打开模态窗口

1 个答案: