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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/14895016/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 22:52:02  来源:igfitidea点击:

event.preventDefault() not working for routeChangeStart in angularjs app

javascriptroutesangularjsangularjs-directive

提问by iJade

Hope any angularjs gurus can help me with this.Here is my angularjs code

希望任何 angularjs 大师都可以帮助我解决这个问题。这是我的 angularjs 代码

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

It alerts in browser back button click when data is dirty, but on clicking cancel or ok it still completes the route change.Seems like event.preventDefault()is not working. Can any one point out what may be wrong

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

回答by Zorglub

I had lots of trouble finding this one, but instead of the "$routeChangeStart" event, you can listen to the "$locationChangeStart" event, for which you can prevent default:

我在找到这个时遇到了很多麻烦,但是您可以监听“$locationChangeStart”事件而不是“$routeChangeStart”事件,您可以防止默认事件:

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

You could also always prevent default, store "next", and display a clean JS modal and decide asynchronously.

您还可以始终阻止默认值,存储“下一个”,并显示一个干净的 JS 模式并异步决定。

$locationChangeStart is currently undocumented but referenced here : https://github.com/angular/angular.js/issues/2109

$locationChangeStart 目前未记录,但在此处引用:https: //github.com/angular/angular.js/issues/2109

回答by Roy Calderon

Fixed exactly after Angular 1.3.7 https://code.angularjs.org/1.3.7/docs/api/ngRoute/service/$route

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

$routeChangeStartBroadcasted before a route change. At this point the route services starts resolving all of the dependencies needed for the route change to occur. Typically this involves fetching the view template as well as any dependencies defined in resolve route property. Once all of the dependencies are resolved $routeChangeSuccess is fired.

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

The route change (and the $location change that triggered it) can be prevented by calling preventDefault method of the event. See $rootScope.Scope for more details about event object.

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

回答by F Lekschas

According to the AngularJS docs(see at $broadcast) you simply cannotcancel an event of type broadcast ($routeChangeStartis of that type):

根据 AngularJS文档(参见 $broadcast),您根本无法取消广播类型的事件($routeChangeStart属于该类型):

The event life cycle starts at the scope on which $broadcast was called. All listeners listening for name event on this scope get notified. Afterwards, the event propagates to all direct and indirect scopes of the current scope and calls all registered listeners along the way. The event cannot be canceled.

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

回答by Marcelo C.

This problem was fixed in the newest versions ( >= 1.3.8 ).

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

Since the arguments supplied to $routeChangeStart are more detailed (and often more useful), if possible, try to update your angular version ...

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

回答by john

The problem might persist if you are using a $stateProvider. In this case use:

如果您使用的是$stateProvider. 在这种情况下使用:

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