Although there are many similar questions on SO, none of the answers have been able to help me so far.
After poring over the Angular $window and $location documentation, I am still struggling to achieve my desired outcome in my client app.
Consider a webpage where users can set multiple filters and share them. Sharing is done through GET parameters like ?f=AN_HASH, which triggers a query to retrieve the matching filter set from the server.
The active filters are stored in SessionStorage using $sessionStorage from ngStorage.
At some point, the user should be able to clear the current filter set by clicking a button. The expected action triggered by this button should:
- Clear the Session Storage item
- Clear the specific url query parameter
?f=(without affecting other parameters that may be added in the future) - Reload the page
This is the function called on ng-click:
$scope.clearFilters = function(){
$sessionStorage.queryFilters = {} // Empty SessionStorage
$scope.activeFilters = false // Disable Clear button
console.log('before:', location.search)
// $location.search({})
// $location.search('f', null)
// $location.search('f', null).replace()
console.log('after:', location.search)
$window.location.reload() // reload the page
}
Between the two console.log statements, you can see what I've attempted so far.
The logs display the following:
before: ?f=THE_HASH
after: ?f=THE_HASH
It appears that nothing has changed (even the GET query in the address bar remains).
I also tried simply emptying the location.search object like this:
$scope.clearFilters = function(){
$sessionStorage.queryFilters = {} // Empty SessionStorage
$scope.activeFilters = false // Disable Clear button
location.search = '' // Reset location.search and reload page
}
While this method worked, I'm not entirely satisfied with it as it removes ALL elements from the GET query, potentially causing issues in the future if additional parameters must be preserved.
For further insight into my search efforts, please see:
- This question;
- This discussion.
Following @Chris's suggestion, I attempted to run:
angular.element(document.body).injector().get('$location').search("f",null)However, the URL GET parameter remained unaffected. In the attached image, you can view my findings from the Chrome console.