Angular JS - UI-Router: Reload state on click

Question

I'am using Angular JS with UI-Router,

I want to reload state, when we click on the state link from the same state.

I fixed it with the following code,

<a ui-sref="page1" ui-sref-opts="{reload: true}">Page 1</a>

But it is tedious to add ui-sref-opts="{reload: true}" in all the links.

So I want a configuration or settings or code in angular js( or ui-router) to manage this globally. That is if we click on state link from the same state, the state should get reloaded.

Please help me to find a solution.

Answer 1

The way to go here is to adjust $state.go implementation, e.g. like this:

Changing the default behavior of $state.go() in ui.router to reload by default

In general we will use decorator to get control over $state behaviour

.config(function ($provide) {
    $provide.decorator('$state', function ($delegate) {

        // let's locally use 'state' name
        var state = $delegate;
        ...

see that in action here

Why that should work is described here:

Difference between ui-sref and $state.go in AngularJS UI-Router