{"action":"created","issue":{"url":"https://api.github.com/repos/angular-ui/ui-router/issues/202","labels_url":"https://api.github.com/repos/angular-ui/ui-router/issues/202/labels{/name}","comments_url":"https://api.github.com/repos/angular-ui/ui-router/issues/202/comments","events_url":"https://api.github.com/repos/angular-ui/ui-router/issues/202/events","html_url":"https://github.com/angular-ui/ui-router/issues/202","id":15903540,"number":202,"title":"Workaround to preserve query string parameters between state transitions","user":{"login":"pholly","id":3717650,"avatar_url":"https://avatars.githubusercontent.com/u/3717650?v=3","gravatar_id":"","url":"https://api.github.com/users/pholly","html_url":"https://github.com/pholly","followers_url":"https://api.github.com/users/pholly/followers","following_url":"https://api.github.com/users/pholly/following{/other_user}","gists_url":"https://api.github.com/users/pholly/gists{/gist_id}","starred_url":"https://api.github.com/users/pholly/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/pholly/subscriptions","organizations_url":"https://api.github.com/users/pholly/orgs","repos_url":"https://api.github.com/users/pholly/repos","events_url":"https://api.github.com/users/pholly/events{/privacy}","received_events_url":"https://api.github.com/users/pholly/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":16,"created_at":"2013-06-23T22:38:18Z","updated_at":"2015-12-01T10:45:17Z","closed_at":"2013-06-24T13:52:39Z","body":"Hi all,\r\n\r\nI have a workaround for those of us that want query string parameters to persist between state transitions even if they are not defined in the state definitions.\r\n\r\nSomewhere global in your app, such as a service or module.run(), copy $location.search() to a global variable in an event listener for the $stateChangeStart event. Then in a listener for the $stateChangeSuccess event assign it back to $location.search(). This works if the query string parameters are NOT part of the urls of your state definitions.\r\n\r\nExample:\r\n\r\n    var app = angular.module('MyApp', ['ngResource', 'ui.state']);\r\n    app.config( function ($stateProvider) {\r\n        //configure states on the $stateProvider here\r\n        //Do NOT add query string variables to the url definitions\r\n    });\r\n    app.run( function ($rootScope) {\r\n        $rootScope.$on('$stateChangeStart',\r\n        function (event, toState, toParams, fromState, fromParams) {\r\n            //save location.search so we can add it back after transition is done\r\n            this.locationSearch = $location.search();\r\n        });\r\n\r\n    $rootScope.$on('$stateChangeSuccess',\r\n        function (event, toState, toParams, fromState, fromParams) {\r\n            //restore all query string parameters back to $location.search\r\n            $location.search(this.locationSearch);\r\n        });\r\n    });\r\n    \r\nI understand why query parameters should be considered part of a state definition, but for our needs we don't want them to be.\r\n\r\n## Background for those that want to know why this is needed:\r\nCurrently, angular query string variables ($location.search()) are treated exactly like path parts and only persist if included in a state definition.\r\n\r\nFor example, if you append an angular query string parameter to the sample app's url, such as `http://angular-ui.github.io/ui-router/sample/#/contacts/1?variable1=test`, then click on \"Show Random Contact\" which performs a $state.transitionTo(), the query string variable will be lost. If `variable1` is included in the state parameters passed to `$state.transitionTo()` AND in the url of the `contacts.detail` state definition then it would persist. E.g.: `$state.transitionTo('contacts.detail', { contactId: id, variable1: 'test' });`\r\n\r\nIn the app I'm creating this is not the desired behavior. When the user enters a search term in the search box and hits enter, a search is performed, and the search term is appended to the $location query string, e.g. `http://www.example.com/myapp#/home?searchTerm=test`. We do not want the view to refresh because it thinks there's a state change. We want the user to move between our app and that search term needs to persist in the url because the search box and the list of search results persist in every state. `We always want the state to be reflected in the url, and that includes the user's active search.` We have a search service that houses the search term and search results data and the url should always be in sync with that search term. We use a couple $watches to ensure they stay in sync.\r\n"},"comment":{"url":"https://api.github.com/repos/angular-ui/ui-router/issues/comments/160931301","html_url":"https://github.com/angular-ui/ui-router/issues/202#issuecomment-160931301","issue_url":"https://api.github.com/repos/angular-ui/ui-router/issues/202","id":160931301,"user":{"login":"Jamie452","id":1735497,"avatar_url":"https://avatars.githubusercontent.com/u/1735497?v=3","gravatar_id":"","url":"https://api.github.com/users/Jamie452","html_url":"https://github.com/Jamie452","followers_url":"https://api.github.com/users/Jamie452/followers","following_url":"https://api.github.com/users/Jamie452/following{/other_user}","gists_url":"https://api.github.com/users/Jamie452/gists{/gist_id}","starred_url":"https://api.github.com/users/Jamie452/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Jamie452/subscriptions","organizations_url":"https://api.github.com/users/Jamie452/orgs","repos_url":"https://api.github.com/users/Jamie452/repos","events_url":"https://api.github.com/users/Jamie452/events{/privacy}","received_events_url":"https://api.github.com/users/Jamie452/received_events","type":"User","site_admin":false},"created_at":"2015-12-01T10:45:17Z","updated_at":"2015-12-01T10:45:17Z","body":"I'm having the opposite issue, I keep having to clear the individual params by setting them to `null` when ever I navigate to a different url param (for example  `/post/1` to `/post/2`).\r\n\r\nI'm having to call the below code everywhere that I'm trying to navigate to a new post:\r\n\r\n`$state.go('main.post', { queryParamOne: null, queryParamTwo: null})`\r\n\r\nI don't want the querystring to persist between these two, for this specific route.\r\n\r\nIs there a way around this?"}}