event.preventDefault() 不适用于 angularjs 应用程序中的 routeChangeStart答案

【问题标题】：event.preventDefault() not working for routeChangeStart in angularjs appevent.preventDefault() 不适用于 angularjs 应用程序中的 routeChangeStart
【发布时间】：2013-01-31 10:43:09
【问题描述】：

希望任何 angularjs 大师都可以帮助我。这是我的 angularjs 代码

$scope.$on('$routeChangeStart', function(event, next, current) {
                if ($scope.myForm.$dirty) {
                    if(!confirm("Unsaved, do u want to continue?")) {
                        event.preventDefault();
                    }
                }
            });

当数据脏时，它会在浏览器后退按钮单击时发出警报，但单击取消或确定时仍会完成路由更改。似乎event.preventDefault() 不起作用。谁能指出可能是什么问题

【问题讨论】：

大概查：stackoverflow.com/questions/14900008/…
@Flek 但该解决方案不会提示用户确认，而是根本不允许浏览返回按钮工作
我遇到了同样的问题。我已经尝试过 $routeChangeStart 和 $locationChangeStart，但它们都没有奏效。你找到解决这个问题的合适方法了吗？
@Sam 请检查此stackoverflow.com/questions/14849857/… 不准确但可能有帮助

标签： javascript routes angularjs angularjs-directive

【解决方案1】：

我很难找到这个，但是你可以监听“$locationChangeStart”事件，而不是“$routeChangeStart”事件，你可以阻止默认：

$scope.$on("$locationChangeStart", function(event, next, current) {
    if (!confirm("You have unsaved changes, continue navigating to " + next + " ?")) {
        event.preventDefault();
    }
});

您也可以始终阻止默认设置，存储“下一个”，并显示一个干净的 JS 模态并异步决定。

$locationChangeStart 目前没有记录，但在此处引用：https://github.com/angular/angular.js/issues/2109

【讨论】：

由于某种原因这对我不起作用，我复制并粘贴了您提供的完全相同的代码块，但是当我单击取消时，它仍然会将我带到下一页。你知道为什么我的 preventDefault() 不起作用吗？

【解决方案2】：

在 Angular 1.3.7 之后完全修复 https://code.angularjs.org/1.3.7/docs/api/ngRoute/service/$route

$routeChangeStart 在路线更改之前广播。此时，路由服务开始解决发生路由更改所需的所有依赖项。通常这涉及获取视图模板以及在解析路由属性中定义的任何依赖项。一旦解决了所有依赖项，就会触发 $routeChangeSuccess。

可以通过调用事件的 preventDefault 方法来阻止路由更改（以及触发它的 $location 更改）。有关事件对象的更多详细信息，请参阅 $rootScope.Scope。

【讨论】：

【解决方案3】：

根据 AngularJS docs（参见 $broadcast），您只是无法取消广播类型的事件（$routeChangeStart 属于该类型）：

事件生命周期从 $broadcast 所在的范围开始叫。在此范围内侦听 name 事件的所有侦听器都得到通知。之后，事件传播到所有直接和间接的当前作用域的作用域并调用所有已注册的侦听器方式。活动无法取消。

【讨论】：

好的，所以除了使用 $routeChangeStart 之外，还有其他方法可以检测浏览器后退按钮的点击。我已经尝试过 locationChangeStart 和 onbeforeunload，但都不起作用
我会首先调用一个函数来检查所有依赖项，并且只有在它们为真时才更改位置。关于您实际尝试做的事情的更多细节会很好。
其实我有一个表单。如果表单有未保存的数据并且用户单击浏览器后退按钮，它会要求确认消息。这就是我真正想要做的。这会有所帮助如果您可以发布一些代码，则已满。
正如我所说，单击“提交”按钮时无需直接更改位置，只需调用一个函数并评估表单即可。您现在要问的更像是如何评估表单，而不是为什么 preventDefault() 不起作用或我有什么问题？

【解决方案4】：

此问题已在最新版本 ( >= 1.3.8 ) 中得到修复。

由于提供给 $routeChangeStart 的参数更详细（并且通常更有用），如果可能，请尝试更新您的角度版本...

【讨论】：

【解决方案5】：

如果您使用$stateProvider，问题可能仍然存在。在这种情况下使用：

$scope.$on('$stateChangeStart', function( event){
  .....
  event.preventDefault();
});

【讨论】：