angular ui-router: how do I reload a state when a

Question

For example, I want this change in navigation to reload the state:

• #/detail/1
• #/detail/2

But I do not want this navigation to reload the state:

• #/detail/1?search=blah
• #/detail/1?search=huzzah

According to the ui-router documentation, setting reloadOnSearch: false should accomplish this, but try the plunk below. When reloadOnSearch === false, changing the path parameter doesn't reload the state even though the documentation says it should.

Plunkr: http://run.plnkr.co/ZPy9uabYlkMilwdS/#/param

Answer 1

This is a bug in UI-Router that was fixed in release 0.2.15:

https://github.com/angular-ui/ui-router/releases

Upgrading to the latest will fix the issue

Answer 2

I've created a plunker, demonstrating that ui-router feature reloadOnSearch is working as documented here:

reloadOnSearch:

Boolean (default true). If false will not retrigger the same state just because a search/query parameter has changed. Useful for when you'd like to modify $location.search() without triggering a reload.

So, what this says, that if we do have state like this

.state('index.detail', {
      url: '/detail/:id',
      reloadOnSearch : false,
      ...
    })

navigating to the

• ui-sref="index.detail({id:1})"

will load this state, while navigating to

• ui-sref="index.detail({id:any-other-id})"

will do nothing. But! If we would introduce new (e.g. sibling) state defined like this:

.state('index.other', {
      url: '/other/:id',
      reloadOnSearch : false,
      ...
    })

navigating to below sequence will always re-trigger state reload, not because the param change, but because the state change

1. <a href="#/index/detail/1" ...
2. <a href="#/index/other/1" ... // will relaod
3. <a href="#/index/detail/2" ... // because the state
4. <a href="#/index/other/2" ... // is changing

See that all in action here...