State change and refresh mechanism

ionic-v1
1

New to IONIC here, so not sure if this question belongs here. If not any guidance would be appreciated. I am looking at http://ionicframework.com/docs/api/directive/ionNavView/ for an example navigation and state routing. The example shows states changing (when tabs are clicked) and when you go back to a state you see it as it was left. The question I have is how does one update a page/view once the state is navigated to? I happen to have a function to refresh the content in the controller for that state, but I am not sure how to invoke it when the user changes to that state.

2

I think you’re referring to how Ionic caches views. So if you start at A and load data into the view (for example), go to B, and then go back to A, the data will still be there. If you want to update the view every time it is shown, you can either turn off the cache for that view with cache-view="false" on <ion-view ...> (or for the whole app with the configuration options) so that the controller’s code is run anew each time the view is shown, or you can run something like this in your view’s controller:

$scope.$on('$ionicView.enter', function () { 
    Code to update view etc... 
});

You can find all of the events here: http://ionicframework.com/docs/api/directive/ionView/

1 Like
3

Or you disable caching of this view:

<ion-view cache-view="false"></ion-view>
1 Like
4

If you are looking the refresh the content of the page every time you navigate to it (ex. some new data from server ) then use resolve in the route changing.

.state('stateName',{
        url:'/url',
        templateUrl:'template',
        controller:'Controller',
        resolve:{
            pageData:[function() {
                //Code to fetch the page data.
            }]
        }
    })
5

Problem with resolves in states is the request could get possibly go wrong.

So you need the possibility to resend request in your controller and so on (and you do not want to get your app gets stuck).
In case of this i am not a friend of resolves…

6

In my application, the view is displaying a map or a list alternatively. The intent being that when a user navigates to that state, the map or list is updated (from the server). I don’t however wish to “reinitialize”/reload the entire view since there are other properties I don’t wish to wipe away (such as the map/list display mode itself).

I ended up having success with the following:

 $scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){
    if (toState.name == 'tabs.home'){
        $scope.refreshData();
    }        
});

Any drawbacks? Should I be using the $ionicView.enter event instead as you highlight above?

7

My general thinking is if it works, great. That said, the $ionicView events may give you more granular control since there are beforeEnter and afterEnter events as well. Plus, it’s only called if you are navigating to that particular view, so it avoids running the code every time the state is changed regardless of whether or not its your view. ($stateChangeSuccess is called from the root scope so it’s called every time the state changes.) There’s no need for if (toState.name == 'tabs.home'){...} so it makes your code a bit cleaner. So in general, I’d probably go with the $ionicView.enter or similar.

8

For the reasons you stated I have switched to using $ionicView events. Thank you.