Question

常规JavaScript有window.onbeforeunload。如何使用HTML5路由在AngularJS中模拟相同的内容？

有$ beforeRouteChange，但据我所知，它不允许你取消该事件。

澄清一下：window.onbeforeunload可用于导航离开页面，但不适用于页面内导航，例如仅通过HTML5历史记录API从一个控制器转到另一个控制器。

Answer 1

添加：

$scope.$on('$destroy', function() {
   window.onbeforeunload = undefined;
});
$scope.$on('$locationChangeStart', function(event, next, current) {
   if(!confirm("Are you sure you want to leave this page?")) {
      event.preventDefault();
   }
});

Answer 2

有一个$locationChangeStart事件可以取消。

由于尚未记录，以下是单元测试，描述了它如何影响$route服务。 https://github.com/angular/angular.js/blob/v1.0.1/test/ng/routeSpec.js#L63

这不会像window.onbeforeunload那样为用户提供确认。您需要自带对话框服务并重新启动位置更改过程以获得相同的效果（或者您可以使用同步$window.confirm）。

Answer 3

如果您使用的是angular-ui-router，则需要使用$stateChangeStart代替$locationChangeStart。

Answer 4

使用 UI-Router版本1.0.0 + 时，请使用$transitions.onStart代替$stateChangeStart。请参阅transition hooks文档。

自版本1.0.0（source）起，$stateChange*事件已弃用：

现已弃用所有州事件（即$stateChange*和朋友）默认情况下禁用。而不是听事件，使用 Transition Hook API。

中止转换的示例代码（source）：

$transitions.onStart({}, function(transition) {
  if (transition.to().name === 'unreachable') {
    return false;
  }
}

AngularJS中window.onbeforeunload对等路由的等价性

4 个答案: