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

Question

我是一个有角度的新蜜蜂。 我正在尝试编写一个验证，在用户尝试关闭浏览器窗口时提醒用户。

我的页面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）但所有状态事件（例如$stateChangeStart 从1.0开始不推荐使用 。 新的ui-router 1.0代码使用$ transitions服务 。 所以你需要在你的组件中注入$transitions然后使用$ transitions.onBefore方法，如下面的代码所示。

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

这只是一个非常简单的例子。 $transitions服务可以接受更复杂的响应，例如promises。 有关更多信息，请参阅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