javascript - AngularJs在重定向到新位置时更改后退按钮的位置

在我们的商店中，用户选择一种产品（/shop/products），然后重定向到第一个自定义页面（/shop/details）。他进行了一些自定义，然后单击“下一步”。在我们的控制器（productDetailsController）中，我们使用选定的属性创建一个新对象（Order），然后重定向到进一步定制该顺序的下一页（shop/individualization?orderId=2）。每当用户现在使用浏览器后退按钮时，我们都希望通过参数使该订单可用于上一页。因此，我们需要更改后退按钮指向的URL（/shop/details?orderId=2而不是/shop/details）。



简而言之：

/shop/products -nextButton- /shop/details -nextButton- shop/individualization?orderId=2

shop/individualization?orderId=2-浏览器后退-/shop/details?orderId=2



如果仅在控制器内部使用$location.replace()，它将在shop/individualization?orderId=2后退按钮选择产品选择/shop/products。

如果我在一个摘要周期内执行两个$location.path()，它将忽略第一个：

          // inside the order creation promise...
          var search = {orderId: createdOrder.id};
          $location.path("/shop/details").search(search);
          $location.path("/shop/individualization").search(search);

从replace()导航到/shop/products时，我无法使用/shop/details，因为从那里使用后退按钮仍然需要导航到/shop/products。

有什么建议么？

谢谢！

最佳答案

概述可能的解决方案：


服务会跟踪订单（可能只是orderId，取决于您的确切用例）
shop/individualization（或导航到shop/details的shop/individualization动作）在服务中设置orderId
shop/individualization和shop/details都定义reloadOnSearch: false
shop/individualization和shop/details都将URL搜索参数绑定到服务；控制器逻辑可以是：

app.controller("XXX", function($scope, orderService, $location) {
    // initialization
    var orderId = $location.search("orderId");
    if( orderId ) {
        orderService.setOrderId(orderId); // setOrderId() could handle loading the order too
    }
    else {
        orderId = orderService.getOrderId();
        // reloadOnSearch is false, so this doesn't trigger a navigation
        if( orderId ) $location.search("orderId",orderId);
    }

    // ...rest of controller logic
});

记住：


您正在执行的操作使shop/details可以添加书签，以便用户可以随时返回以查看旧订单。系统应准备好处理这种情况，例如从服务器重新加载订单。如果不希望添加书签，则可以简化操作：只需使用服务并完全放弃搜索参数。
您可能还需要在某些时候从orderService中删除​​订单对象。

关于javascript - AngularJs在重定向到新位置时更改后退按钮的位置，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23425639/