如何检测用户是否单击 Angularjs 中的浏览器后退按钮 [英] How to detect if a user clicks browser back button in Angularjs

查看:27
本文介绍了如何检测用户是否单击 Angularjs 中的浏览器后退按钮的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个类似表单的页面,其中包含一些数据.并希望在用户单击浏览器后退按钮时显示弹出窗口/警报,询问他们是要返回还是停留在同一页面上".我正在使用 angular-ui-router 的 $stateProvider 并且只想将它绑定到一个状态/视图.

I have a form-like page with some data. And want to show a popup/alert when a user clicks the browser back button, asking "if they want to go back or stay on the same page". I am using angular-ui-router's $stateProvider and want to bind this only to one state/view.

推荐答案

这是我之前对其他一些问题的回答,但应该能帮到你

您可以使用 angular $routeChangeStart

You can do it by using angular $routeChangeStart

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

Broadcasted before a route change. At this point the route services start 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.

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

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.

所以请试试下面的代码.

So please try this below code.

  $scope.$on('$routeChangeStart', function (scope, next, current) {
        if (next.$$route.controller != "Your Controller Name") {
            // Show here for your model, and do what you need**
            $("#yourModel").show();
        }
    });

更新:

您需要在模型弹出窗口中编写您的功能工作.喜欢

Update:

You need to write your functional work in the model popup. like

放一些链接按钮

  • 您确定要转到上一页吗?
  • 你想留在当前页面吗?
  • 您想退出吗?等

然后为上一个页面添加ng-click事件,使用return false等保持当前页面

then Add ng-click event for go prev page, stay current page with using return false, etc.

这篇关于如何检测用户是否单击 Angularjs 中的浏览器后退按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆