AngularJs change back button location while redirecting to new location

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!

Nikos Paraskevopoulos · Accepted Answer · 2014-05-02 11:07:47Z

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:

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, e.g. reload the order from the server. If bookmarking is not desired, things are simplified: just use the service and drop the search param altogether.
You may also want to remove the order object from the orderService at some time.

Thanks for your detailed answer. So nothing out of the box is what I need to know.. too bad. Also I did not think of bookmarking (which otherwise is a desired feature) an order step. That really needs to be handled!
Nothing out of the box AFAIK. About the bookmarking my point is that if bookmarking was not desired, then just a service to share the order between views would suffice, there would be no need for touching the URL.

Collectives™ on Stack Overflow

AngularJs change back button location while redirecting to new location

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related