angularjs - AngularJS 中的 window.onbeforeunload 等价于路由

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请参阅转换挂钩文档。

$stateChange*从版本 1.0.0 ( source ) 开始不推荐使用这些事件：

所有状态事件（即$stateChange*和朋友）现在默认已弃用和禁用。使用 Transition Hook API，而不是监听事件。

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

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