Zipper Zipper - 5 months ago 22
Javascript Question

Clear out existing angular ui router query params when switching to the same route

I'm using angular ui router to route bewteen my pages and I have a route that has a few different query parameters. The problem is that when I switch routes for that same page with different query parameters, any existing parameters stay in place.

So if I'm at url

localhost:8080/myapp/#/myPath?barId=098
and I use one of the below items I end up at url
localhost:8080/myapp/#/myPath?barId=098&fooId=123
instead of
localhost:8080/myapp/#/myPath?fooId=123


I've tried using
ui-sref="myPath({fooId:123}"
and
$state.go("myPath", {fooId:123})
but they both result in the same behavior. Is there a way to remove existing parameters?

Here's the state definition

.state('myPath', {
url: '/myPath?fooId&barId&fluffyId&anotherId',
templateUrl: 'foo.html',
controller: MyController
})

Answer Source

The ui-router sref options defaults inherit to true. I think you need to set it to false like this:

$state.go("myPath", {fooId:123}, {inherit: false})

Or in the view like this:

ui-sref="myPath({fooId:123}" ui-sref-opts="{reload: true, inherit: false}"

You can read about the ui-sref-opts in the documentation for ui-router here.