$state.reload doesn't refresh view

Question

I've got the following piece of code:

launch.controller('HeaderController', ['$scope', '$state','$timeout', function($scope, $state, $timeout){
    $scope.reloading = false ;

    $scope.reload = function(){
        $scope.reloading = true;
        $state.reload();
        $timeout(function(){
            $scope.reloading = false;
            $scope.$apply()
        }, 2000);
    }
}]);

And the following template:

<img src="assets/img/refresh.svg" ng-class="{'reloading': reloading == true}">

When I do not use $scope.reload(), it is perfectly reflected in the view. However, as soon as I use the function, the view doesn't recognize the boolean being changed. I've checked whether the function is running at all, and it does; Adding a console.log after $state.reload() works just fine. Also the view actually does doe a reload of the data.

What's the problem here..?

Answer 1

$state.reload() is an alias of

$state.transitionTo($state.current, $stateParams, { 
  reload: true, inherit: false, notify: false 
});

So you set $scope.reloading = true; and immediately reload the state, resetting the controllers, so the view doesn't have time to change the indicator, because it all happens to fast.

So what I suggest is using a flag of some sort, to allow you to show the visual indicator using sessionStorage:

launch.controller('HeaderController', ['$scope', '$state','$timeout', function($scope, $state, $timeout){
    $scope.reloading = sessionStorage.getItem('reloading') === 'true';

    if( $scope.reloading ) { 
        sessionStorage.removeItem('reloading');

        $timeout(function(){
            $scope.reloading = false;
        }, 2000);
    }

    $scope.reload = function(){
        sessionStorage.setItem('reloading', 'true');
        $state.reload();
    }
}]);

What I did here is that when you reload the page, you first set a reloading flag in the session, and then reload the page. When the controller is created I set $scope.reloading by the value in the session ($scope.reloading = sessionStorage.getItem('reloading') === 'true';), if it was set - the flag is removed from the session, and hide the indicator in the view after 2 seconds (Using the $timeout service).

FYI - There is a ngStorage module for angularjs so you can use it when you need to manage the storage in your app.