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

我是一只新的蜜蜂。 我试图编写一个validation，当他试图closures浏览器窗口时提醒用户。

我在我的页面v1和v2上有2个链接。当点击链接到特定的页面。 这里是redirect到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时popup一条消息，说明他“如果他希望继续离开，他将离开v1”，而点击v2时也是如此。 任何指针如何实现这一点，将不胜感激。

我在这里得到了答案，但每隔一段时间后都会popup消息。

更新的代码;

控制器

 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。

我试图编写一个validation，当他试图closures浏览器窗口时提醒用户。

2。

我想在用户点击v1时popup一条消息，说明他“如果他希望继续离开，他将离开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事件以便连接到查看转换事件，所以使用此代码来处理控制器中的转换validation：

 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指令，您可以将其应用于任何将自动监视更改的窗体，并在用户重新加载页面或导航时向用户发送消息。 @见https://github.com/facultymatt/angular-unsavedChanges

希望你find这个指令有用！

Answer 5

其他的例子在这里可以正常使用老版本的ui-router（> = 0.3.x），但是所有的状态事件，比如$stateChangeStart ， 从1.0开始都不推荐使用 。 新的ui-router 1.0代码使用$ transitions服务 。 所以你需要注入$transitions到你的组件，然后使用$ transitions.onBefore方法，如下面的代码演示。

 $ transitions.onBefore（{}，function（transition）{
  确认（“你确定要离开这个页面吗？”）;
 }）;

这只是一个非常简单的例子。 $transitions服务可以接受更复杂的响应，如promise。 有关更多信息，请参阅HookResulttypes 。

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