Keep URL params ui-router

Question

I have a web app with an entrance point in a different app. So by the time user gets to my app they have some parameters in the url like so:

http://myapp.com/#/new?param1=value&param2=value2

In my app I have 3-4 tabs each of which is it's own state and is accessed with ui-sref="state"

The issue is that when I switch to any of these states I lose the parameters that user came in with initially.

In a nutshell all I want http://myapp.com/#/differentstate?param1=value&param2=value2 instead of http://myapp.com/#/differentstate when I switch states.

I am not sure how to set that up... Thank you!

Answer 1

inside of your angular app's .run() function you can do this: (you will need to DI $rootScope, and $location)

    var locationSearch;

    $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
        //save location.search so we can add it back after transition is done
        locationSearch = $location.search();
    });

    $rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
        //restore all query string parameters back to $location.search
        $location.search(locationSearch);
    });