In my Angular application that uses UI Router, I have set up subscriptions to the $stateChangeStart and $stateChangeSuccess events. Within these event handlers, I am toggling a controller property called "isLoading" to show or hide a loading indicator outside of the ui-view tag using an ng-show directive. Despite confirming through debugging that the events are firing and variables are being updated in JavaScript, the DOM does not reflect these changes between the start and success events, resulting in the loading indicator never showing up. To overcome this issue, I resorted to adding a $timeout with a delay of 0 seconds to ensure that the loading indicator appears.
$rootScope.$on("$stateChangeStart", function() {
ctrl.isLoading = true;
});
$rootScope.$on("$stateChangeSuccess", function(ev, to, toParams, from, fromParams) {
$timeout(function() {
ctrl.isLoading = false;
}, 0);
});
This JSFiddle http://jsfiddle.net/uwhetx7q/2/ illustrates the challenge I encountered.
By introducing the $timeout even with a minimal delay, the loading indicator briefly appears. However, without it, the variable update does not seem to take effect as expected.
I attempted manual calls to $apply and $digest functions but encountered errors indicating that these methods were already in progress.
I remain optimistic that there is a straightforward solution I might be overlooking to display my loading indicator correctly, as relying on an empty $timeout is not ideal :)
Thank you for any insight!