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