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

Question

In our shop the user selects a product ( /shop/products ) and then gets redirected to the first customization page ( /shop/details ). He does some customization and clicks "next". In our controller ( productDetailsController ) we create a new object (Order) with the selected properties and redirect to the next page ( shop/individualization?orderId=2 ) where that order is further customized. Whenever the user now uses the browser back button we want to make that Order available to the previous page via parameter. So we need to change the url that the back button is directing to ( /shop/details?orderId=2 instead of /shop/details ).

---

In short:

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

shop/individualization?orderId=2 -BROWSER-BACK- /shop/details?orderId=2

---

If I just use $location.replace() inside the controller it will back-button from shop/individualization?orderId=2 to the product selection /shop/products .

If I do two $location.path() inside one digest cycle it will just ignore the first one:

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

I can't use replace() when navigating from /shop/products to /shop/details because using the back button from there still needs to navigate to /shop/products .

Any suggestions?

Thanks!

Answer 1

Outlining a possible solution:

• a service keeps track of the order (could be just the orderId , depends on your exact use case)
• shop/individualization (or the action of shop/details that navigates to shop/individualization ) sets the orderId in the service
• both shop/individualization and shop/details define reloadOnSearch: false

• both shop/individualization and shop/details bind the URL search parameter to the service; the controller logic could be:

   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 }); 

Keep in mind:

1. What you are doing makes shop/details bookmarkable, so that the user can return at any time to see an old order. The system should be prepared to handle this case, eg reload the order from the server. If bookmarking is not desired, things are simplified: just use the service and drop the search param altogether.

2. You may also want to remove the order object from the orderService at some time.