当用户离开页面时，在AngularJS中显示警报。

11 浏览
0 Comments

当用户离开页面时，在AngularJS中显示警报。

我是一个AngularJS的新手。我正在尝试编写一个验证，当用户尝试关闭浏览器窗口时会弹出警告。

我页面上有两个链接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时也是同样的操作。

如果有关于如何实现这一点的任何指示，将不胜感激。

我在这里找到了一个答案here，但它在每个时间间隔后都会弹出消息。

更新的代码：

控制器

function MyCtrl1() {
    $scope.$on('$locationChangeStart', function (event, next, current) {
        if ('your condition') {
            event.preventDefault();
            MessageService.showConfirmation(
                '您确定吗？',
            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 = [];

0

3 答案

0 Comments

当用户离开页面时，在AngularJS中显示警报的原因是为了防止用户离开页面时未保存的更改丢失。解决方法是使用一个指令来跟踪表单的状态，并在用户离开页面时触发警报。

上面的代码是一个指令，它会在表单卸载时自动清理自身。如果你想要阻止警报的触发（例如，因为你成功保存了表单），可以调用$scope.FORMNAME.$setPristine()，其中FORMNAME是要阻止提示的表单的名称。

指令中的isDirty函数用于检查表单是否有未保存的更改。areYouSurePrompt函数会根据表单的状态返回相应的提示消息。在window对象上添加beforeunload事件监听器，以在用户离开页面时触发提示。在$destroy事件中移除beforeunload事件监听器。在$locationChangeStart事件中，检查是否需要触发提示，并根据用户的选择来阻止离开页面的默认行为。

文章最后提到，在某些浏览器中，使用原生的window对象方法无法正常工作，需要使用jQuery的方法来绑定和解绑beforeunload事件。也提到$locationChangeStart事件似乎没有被触发，所以对于使用onbeforeunload的情况，这部分代码是否真的有必要。

这篇文章介绍了在AngularJS中显示警报以防止用户离开页面时丢失未保存更改的问题，以及相应的解决方法。指令用于跟踪表单的状态，并根据需要触发警报。文章还提到在某些浏览器中可能需要使用jQuery方法来绑定和解绑事件，并对$locationChangeStart事件的触发情况进行了讨论。

0
0 Comments

在AngularJS中当用户离开页面时弹出警告框的原因是为了在用户关闭浏览器窗口时进行验证。解决方法是使用window.onbeforeunload事件来实现。

在第一个问题中，可以使用以下代码实现：

window.onbeforeunload = function (event) {
  var message = '确定要离开吗？';
  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("确定要离开此页面吗？")
        if (!answer) {
            event.preventDefault();
        }
    });
}

将这些代码放在需要确认切换的控制器中，即MyCtrl1和MyCtrl2控制器。

需要注意的是，在控制器中需要注入$scope。

另外，需要注意的是在Firefox浏览器中可能会出现问题，因为使用e.preventDefault()会导致无限循环事件。可以参考Scheintod中提供的更稳定的版本来解决这个问题。

0
0 Comments

问题出现的原因：

1. 使用$route服务时，当位置发生更改时，事件会被触发，导致对话框一直出现，陷入无限循环。

2. 使用Angular ui-router时，应该使用'$stateChangeStart'而不是'$locationChangeStart'。

解决方法：

1. 使用更简洁的代码来实现确认对话框。

2. 可以为标准JavaScript事件添加处理程序，监听资源卸载。当不是单页应用程序时，可以将监听器分配给window.onbeforeunload。

3. 当使用Angular ui-router时，应该使用'$stateChangeStart'而不是'$locationChangeStart'。

4. 使用.$off扩展来取消订阅广播事件，帮助更好地分离关注点。

5. 如果在打开页面时，代码立即出现而不是在导航离开时，请检查代码是否正确。

6. 当刷新当前页面时，此方法可以工作，但当导航离开时不起作用。

以下是整理后的文章：

在AngularJS中，当用户离开页面时，可以通过显示警报来提醒用户。下面的代码展示了如何在用户离开页面时显示确认对话框。

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

这种写法更简洁，避免了陷入无限循环的问题。

如果不是单页应用程序，还可以使用标准JavaScript事件的处理程序来监听资源卸载。可以将监听器分配给window.onbeforeunload。然而，当使用$route服务时，每次位置更改时都会触发该事件。

当使用Angular ui-router时，应该使用'$stateChangeStart'而不是'$locationChangeStart'。

为了更好地分离关注点，可以使用.$off扩展来取消订阅广播事件。

如果在打开页面时，代码立即出现而不是在导航离开时，请检查代码是否正确。

请注意，这种方法在刷新当前页面时可以工作，但在导航离开时不起作用。

希望这些解决方法能够帮助您在AngularJS中实现在用户离开页面时显示警报的功能。

0