javascript - 当用户离开页面时在 angularjs 中显示警报

Question

我是一个 angularjs 新蜜蜂。我正在尝试编写一个验证，当他试图关闭浏览器窗口时提醒用户。

我的页面 v1 和 v2 上有 2 个链接。单击链接时，它会转到特定页面。这是重定向到 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 = [];

Answer 1

确认对话的代码可以这样写更短：

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

Answer 2

让我们分开你的问题，你问的是两个不同的事情：

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事件以连接到视图转换事件，因此使用此代码来处理控制器中的转换验证：

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

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

Answer 4

正如您在上面所发现的，您可以使用 和 的组合window.onbeforeunload来$locationChangeStart向用户发送消息。此外，您可以利用ngForm.$dirty仅在用户进行更改时向他们发送消息。

我编写了一个 angularjs 指令，您可以将其应用于任何表单，如果用户重新加载页面或导航离开，它将自动监视更改并向用户发送消息。@see https://github.com/facultymatt/angular-unsavedChanges

希望你发现这个指令很有用！

Answer 5

此处的其他示例适用于旧版本的 ui-router (>=0.3.x)，但从1.0 开始不推荐使用$stateChangeStart所有状态事件，例如. 新的 ui-router 1.0 代码使用$transitions 服务。因此，您需要注入您的组件，然后使用$transitions.onBefore方法，如下面的代码所示。 $transitions

$transitions.onBefore({}, function(transition) {
  return confirm("你确定要离开这个页面吗？");
});

这只是一个超级简单的例子。该$transitions服务可以接受更复杂的响应，例如承诺。有关详细信息，请参阅HookResult 类型。

Answer 6

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

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

重新加载页面：使用 init