AngularJS中window.onbeforeunload的路由等效性

普通JavaScript有window.onbeforeunload。如何在HTML5路由中模拟AngularJS中的相同内容？AngularJS中window.onbeforeunload的路由等效性

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

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

来源

2012-08-02 Martin Probst

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

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

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

来源

2012-08-27 16:59:56 groner

是否为'回button'工作？ – Freewind 2013-03-09 06:32:54

@Freewind有一个2013年5月1日签到，使其工作后退按钮：https://github.com/angular/angular.js/commit/dc9a580617a838b63cbf5feae362b6f9cf5ed986 – Nils 2013-05-10 02:39:57

补充一点：

$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(); 
    } 
});

来源

2014-05-06 12:21:18 EpokK

对于角度路由器'$ stateChangeStart'应该使用。它不处理页面刷新，因为它是在'window.onbeforeunload'的情况下处理的。 – 2015-04-14 06:40:11

我必须在'$ rootScope'而不是'$ scope'上监听'$ stateChangeStart'，这样才能为我工作。请注意，如果你这样做，当你的当前范围被销毁时（'$ scope。$ on（'$ destroy，...）'），你将需要手动取消注册这个事件监听器。 – 2017-02-16 20:20:53

如果您正在使用角UI的路由器，你需要使用$stateChangeStart而不是$locationChangeStart。

来源

2015-03-26 10:06:47

完全正确！当控制器“启动”时调用'$ locationChangeStart'和angular-ui-router，而不是在用户离开页面时调用。 – 2016-01-20 10:41:08

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

的$stateChange*事件被弃用的版本1.0.0（source）：

所有状态的事件，（即$stateChange*和朋友）都现在已经过时并默认为禁用。而不是监听事件，请使用 Transition Hook API。

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

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

来源

2018-03-10 16:36:47 Config

AngularJS中window.onbeforeunload的路由等效性

回答

相关问题