无法使用 Angular 服务处理 onbeforeunload 事件

Question

在我的一项服务中，我的onbeforeUnload事件有以下回调。 在我的app.run块中，我有：

window.onbeforeunload = Services.beforeWindowClose;

这个方法在一个服务中：

this.beforeWindowClose = function (event) {
            var currentState = $state.current.name;
            if (currentState !== constant.LOGOUT) {
                $rootScope.$broadcast("close");
                if (Utilities.isSavePending)
                    event.returnValue = constant.MSG;
            }
        }

在我的控制器中，我有：

$scope.$on("close", function () {
            Utilities.isSavePending = vm.save; //sets it to true
        })

现在考虑到事件在角度上是同步的，这段代码应该在窗口关闭时给我一个弹出窗口。 但是，这直接关闭了我的窗口。

我的意图是每当用户关闭窗口时，我都会引发一个事件并查看我的控制器中是否有任何未保存的数据。 如果有未保存的数据，浏览器不应该关闭并弹出，如果没有未保存的数据，浏览器应该关闭。

我做错或理解错了吗？

Answer 1

在您的模块run函数中，您必须beforeunload这种方式声明beforeunload事件：

.run(['$window', 'Utilities', function($window, Utilities) {  
  $window.addEventListener('beforeunload', function(e)         
     // Place code here
  };       
});

不是这样：

.run(['$window', 'Utilities', function($window, Utilities) {  
    window.onbeforeunload = function() {         
     // Place code here
    };
}]);

这是在 Angular 中使用onbeforeunload事件的片段。

注意：根据您的浏览器，单击“保存项目”按钮并尝试关闭此窗口后，代码段将不起作用。 然后，您需要将代码粘贴到您自己的项目中。

附加信息

最近的 HTML 规范现在阻止自定义弹出消息，而是显示通用消息。

因此，始终可以阻止导航，但不再可能指定自定义消息

这始终适用于 IE11，但它应该不会持续很长时间（直到下一次更新）。

关于此的 HTML 规范： https : //html.spec.whatwg.org/multipage/browsers.html#unloading-documents

关于这个的 Chrome/Safari 文档： https : //www.chromestatus.com/feature/5349061406228480

 angular.module('app', []); angular .module('app') .controller('ExampleController', ['$scope', 'Utilities', 'ItemService', function($scope, Utilities, ItemService) { // Expose Utilities to make pending state available in template $scope.Utilities = Utilities; // Use item service to save our item $scope.save = function() { ItemService.saveItem(); } $scope.fireCloseEvent = function() { $scope.$emit('close'); } $scope.$on('close', function(event) { Utilities.toggleSavePending(); }); }]) .factory('ItemService', ['Utilities', function(Utilities) { return { saveItem: function() { // ... // Toggle global save pending state Utilities.toggleSavePending(); } } }]) .factory('Utilities', function() { var savePending = false; return { toggleSavePending: function() { savePending = !savePending; }, isSavePending: function() { return savePending; } } }) .run(['$window', 'Utilities', function($window, Utilities) { $window.addEventListener('beforeunload', function(e) { // If save pending state is truthy, prevent browser window from closing if (Utilities.isSavePending()) { var message = 'Warning! Save pending...'; e = e || window.event; if (e) { e.returnValue = message; } return message; } }); }]);

 <!doctype html> <html lang="en" ng-app="app"> <head> <meta charset="utf-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script> <script src="script.js"></script> </head> <body ng-controller="ExampleController"> <button ng-click="save()" ng-disabled="Utilities.isSavePending()">Save item</button> <button ng-click="fireCloseEvent()">Fire Close Event</button> <div ng-if="Utilities.isSavePending()">A message should be displayed when you close the window</div> </body> </html>

无法使用 Angular 服务处理 onbeforeunload 事件

问题描述

1 个解决方案

解决方案1
6 已采纳 2017-05-23 11:16:50

无法使用 Angular 服务处理 onbeforeunload 事件

问题描述

1 个解决方案

解决方案1 6 已采纳 2017-05-23 11:16:50

解决方案1
6 已采纳 2017-05-23 11:16:50