Question

我正在使用Angular.JS中的内置路由器在控件/模板对之间切换。在切换页面时，地址栏会相应更改。我检查了文档，它说AngularJs已将$ location服务与浏览器地址栏同步。

我的问题是我真的想在我的页面中来回禁用。这是因为通过来回点击，我无法获取数据来填充页面。以前使用JQuery mobile，我已禁用地址栏中的URL更改。通过这种方式，我基本上来回禁用了。但是，对于AngularJS，还有办法吗？

Answer 1

我自己已经找到了问题。要停止来回触发的页面切换，一种方法是监听$ locationChangeStart事件。如果您能够告诉它由来回按钮触发，请通过调用event.preventDefault（）;来禁用页面更改。

只要如何判断页面更改是由历史按钮还是逻辑触发，因为在我的主服务中，我有控制页面更改的逻辑。因此，这对我来说不是问题。

Answer 2

没有。 Web应用程序的用户使用后退和前进按钮进行导航是很自然的。在纯粹的jQuery应用程序中，人们使用各种jQuery插件来启用浏览器历史记录，因为默认情况下jQuery不支持浏览器历史记录。因此，angularJS可以保持开箱即用的浏览器历史记录。

当用户使用后退和前进按钮进行导航时，您可以向URL添加参数以填充数据。没有更好的方法来支持导航的后退和前进按钮。

Answer 3

使用Ui路由器模块：

要禁用后退按钮：

$rootScope.$on('$stateChangeStart', 
function(event, toState, toParams, fromState, fromParams){
   event.preventDefault();
   window.history.forward();
});

Answer 4

var allowNav = false;
var checkNav = false;

$rootScope.$on('$stateChangeSuccess', function (event, toState, toStateParams, fromState, fromStateParams) {

            allowNav = checkNav;
            checkNav = true;

        });

$rootScope.$on('$locationChangeStart', function (event, next, current) {
            // Prevent the browser default action (Going back)
            if (checkNav) {
                if (!allowNav) {
                    event.preventDefault();
                }
                else {
                    allowNav = false;
                }
            }
        });

如何在AngularJS中禁用后退和前进导航

4 个答案: