改变浏览器返回按钮在角js中的位置

Question

我有一个有多个步骤的向导。让我们这样说：

Product > Address > Payment > Verify

在/verify步骤中，用户购买一些东西。如果用户现在按下浏览器上的后退按钮，他应该转到/product步骤，而不是/payment步骤。为此，我希望将浏览器历史记录从/payment更改为/product，以便他可以购买更多的东西。

我使用angularjs 1.3.14与启用的HTML5模式和ui-router 0.2.10。因此，解决方案可能使用HTML5历史记录。但如果它也适用于较旧的浏览器，那就太好了。但是得到支持是很好的。

Answer 1

stackg91的回答给了我正确的想法。由于我不想在下一分钟更改页面以重新更改它，所以我在$stateChangeStart上收听。所以我做了类似的事情(伪代码)

 obj.finishedStateListener = $rootScope.$on('$stateChangeStart', function (event, toState) {
     if(statechange inside wizard) {
         event.preventDefault();
         obj.finishedStateListener();
         $state.go(initState);
     }
 })

保存$on函数的返回非常重要，因为它使您有可能注销eventListener。如果您忘记调用它，您将以一个无限循环结束。

Answer 2

好的，简单地说，你可以用状态来做这个。

.config(function($stateProvider, $urlRouterProvider) {
$stateProvider

  // setup an abstract state for the tabs directive
    .state('product', {
    url: "/product",
    templateUrl: "templates/product.html",
    controller: "productCtrl"
  })

   .state('Address', {
    url: "/Address",
    templateUrl: "templates/Address.html",
    controller: "AddressCtrl"
  })

   .state('Payment', {
    url: "/Payment",
    templateUrl: "templates/Payment.html",
    controller: "PaymentCtrl"
  })

   .state('Verify', {
    url: "/Verify",
    templateUrl: "templates/Verify.html",
    controller: "VerifyCtrl"
  })

});

在您的主控制器中，您可以监视状态变速箱

$rootScope.$on('$stateChangeSuccess', function (ev, to, toParams, from, fromParams) {
    if(from.name == 'verify' && to.name == 'payment'){
    $state.go('product')
    redirect example
     }

});

别忘了注射$state！

Answer 3

我知道这很古老，但是为了帮助他人，我所做的就是在调用.replace()来设置后退按钮的位置之前先调用.path()。所以在你的情况下，我会：

// some code in Payment controller...

// call .replace() to set the history to '/product'
$location.replace('/product');
// now change .path()
$location.path('/verify');

现在，在/verify路由上，如果用户按下浏览器的back按钮，它应该将它们带到/product路由而不是/payment。

值得一提的是，我不知道这是否适用于较旧的浏览器，但我可以确认它在Chrome 66.0.3359.181和Safari 11.1中都能工作。

参考资料：Location.replace()