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

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


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


You're right, I can't get any state change events to fire either once already in that state. Until, and if that functionality becomes available to use through that api someday, here's a semi-hacky solution for this. We can just leverage ng-click and use some silly logic to appease QA (in your case). Also, I don't know your controller implementation, so I placed my suggestion on $rootScope in .run in this example for simplicity and visibility, but integrate accordingly if you choose to do so. Observe the following example...

<a ui-sref="about" ng-click="sillyQA()">About</a>

.run(['$rootScope', '$state', function($rootScope, $state) {    $rootScope.sillyQA = function() {        if($state.current.name === 'about') {            $state.go('about', {}, { reload: true });        }    }    // -- just to see our about => about state 'change'    $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){        console.log('toState:   ' + toState.name );        console.log('fromState: ' + (fromState.name || 'Just got there! click again!'));    })}]);

JSFiddle Link - demo