AngularJS with ui.router: reload page when clicking the same state link

Question

I just got a request from our QA team, which I think sounds ridiculous. Here it goes: suppose you are already on the 'about' state/page in the angular-based app, and when you click on the 'about' state url again from the top menu, you want the 'about' page to reload. The about page does not fetch data from anywhere, by the way, a reload is simply equivalent to a blink.

For the state config in my angular app is like this:

.state('about', {
  url: '/about',
  templateUrl: '/path/to/about.html',
  controller: 'aboutCtrl as aboutView'
});

And in the top menus, we have a link pointing to this state:

<a ui-sref="about">About</a>

I have tried many things to get this to work: clicking the link triggers the reload of the same state.

Things like $state.go('about', {}, {reload: true}); or $state.transitionTo('about', {}, {reload: true}); don't work, because the links are static.

One last resort I am currently trying is to manipulate the reload thing in the run phase of Angular by listening to '$stateChangeSuccess' event, but I don't think it will work, because there's no state change at all if you click on the 'about' link while you are right on that state.

Is there any ways to work around this? Thanks

Answer 1

There is an option attribute called ui-sref-opts that comes with the UI Router. I faced the same problem and it solved it.

Eg: <a ui-sref="home" ui-sref-opts="{reload: true}">Home</a>

Docs URL : UI Router DOcs