Prevent URL parameters causing state reload

[WillsB3]

Hi,

Firstly thanks for UI-Router!

Secondly, I believe this issue has been raised before, specifically via #84 and both #46 and #64 look like they cover similar problems. The reason for opening a new ticket is because I believe our situation may be slightly different, and I want to present the use case and get opinion and suggestions on the correct approach we need to take to solve this problem.

We are using UI Router on a project and are also after the "dynamic parameter" functionality that @ksperling describes in #84. We have a screen in our app that lets users compare the details of two items. The user can drag and drop items from a results list into one of two drop-zones on the screen. The following diagram shows a simplified version of the how this functionality looks from an architectural perspective. The comparison functionality is to be driven by URL parameters using either of the two types of URL shown in the diagram (we can't get either to play nicely).

With our current implementation and the way Angular UI seems to be working currently the whole comparison controller gets destroyed and reloaded when a item is dragged into the second drop-zone. This is because the app transitions from one instance of the "compare" state to another instance of the "compare" state with differing URL parameters. This results in the item that is already being shown in the other detail controller disappearing as the old compare controller and detail controllers get destroyed and then reappearing as the new one gets created.

It seems like we need to be able to specify that the itemId parameters should not reload the whole controller (as it can handle the change in state parameters itself) but this does not seem possible with the way UI Router works currently.

So my questions are:

1. Is there a decent way to solve this problem using UI Router as it stands currently (either via 0.0.1 as we are using currently or via the latest master on GitHub)?
2. Is there anything that can be added to UI Router to make handling this type of use case easier?

Thanks!

[ksperling]

Hm, one workaround I can think of would be to not declare the URL parameters you're using in the state url, and then grab them from $location manually in your controller and listen for location change events yourself.

[WillsB3]

Hi @ksperling,

Thanks for your reply. That's exactly the conclusion we came to yesterday evening, so it's good to know we followed a similar thought process. We managed to get that to work so our problem is kind of solved from a "get something that works" perspective. However as you say this is still a workaround and not an ideal solution. Now our immediate problem is solved I'm interested in how we can solve this problem for other users of UI Router in a similar situation.

We had the idea of somehow being able to whitelist a bunch of URL parameters which should not cause UI Router to destroy and create a new instance of the state when a change is detected. I've not fully thought through how this might look from an implementation perspective and I'm not sure of it's feasibility as I'm not familiar with the code of UI Router short of a quick hack around the source yesterday when we were trying to find a fix for the above issue.

What are your thoughts on this approach? Is there a better way? Is this a use case you think UI Router should support? It seems pretty logical to me that we should be able to prevent the entire view and controller getting reloaded if we only want to change a minor parameter which the controller can easily handle itself, especially if it could $scope.$watch on the URL properties exposed by $stateParams?

[nateabele]

Keep an eye over here: #125.