Question

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

Product > Address > Payment > Verify

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

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

Answer 1

好的，基本上你可以使用States来实现这个

.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"
  })

});

在主控制器中，您可以观察Statechanges

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

});

别忘了注入$ state！

Answer 2

在HTML5中，您可以使用历史记录对象进行操作：https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

实际上，您只能修改最后一个条目，有两个选项：

pushState() - 在历史记录末尾添加新状态
replateState() - 使用新的

它得到了很好的支持http://caniuse.com/#feat=history，但要小心旧IE。

不要忘记使用后备：

if (history.pushState) {
    // your code with history manipulation
} else {
    // your fallback code for older IE and others
}

Answer 3

stackg91的答案给了我正确的想法。因为我不想在下一刻更改页面以重新更改它，所以我在$stateChangeStart上听。所以我做了类似的事（伪代码）

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

保存$on函数的返回非常重要，因为它为您提供了取消注册eventListener的可能性。如果你忘记打电话，你将以无限循环结束。

Answer 4

我知道这已经老了但是为了帮助别人，我在拨打.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。< / p>

有一点需要提及的是，我不知道这是否适用于旧浏览器，但我可以确认它适用于Chrome 66.0.3359.181和Safari 11.1

参考：Location.replace()

以角度js更改浏览器后退按钮的位置

4 个答案: