$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..?

see this http://stackoverflow.com/questions/21714655/reloading-current-state-refresh-data — Hadi J, May 20 '17 at 12:38
This did not work for me, even when I change the inheritance function to `true`.. — Rink Stiekema, May 20 '17 at 12:47
Try removing `$scope.$apply()` - I don't see any use for it because you use the native `$timeout` service — Alon Eitan, May 20 '17 at 12:54
You are right, that does not make any difference in this case. However, it doesn't resolve the problem either. — Rink Stiekema, May 20 '17 at 13:03
Try injecting `$stateParams` to the controller, and use this function: `$scope.reload = function() { $scope.reloading = true; $state.transitionTo($state.current, $stateParams, {reload: true, inherit: false, notify: false}).then(function() { $timeout($scope.reloading = false;), 2000}); }` also - comment the `$scope.reloading = false ;` on the second line - Let me know if it changed anything — Alon Eitan, May 20 '17 at 13:13
I did add $stateParams myself already. But removing line 2 didn't help unfortunately. — Rink Stiekema, May 20 '17 at 13:39

Alon Eitan · Answer 1 · 2017-05-20T14:39:45.237

$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.

$state.reload doesn't refresh view

1 Answers1