Ionic / How to expect a cached view to be refreshed?

Question

I'm using the latest Ionic "nighty build" version currently.

One good news with this version is the concept of cached views:

By default views are cached to improve performance. When a view is navigated away from, its element is left in the DOM, and its scope is disconnected from the cycle. When navigating to a view which is already cached, its scope is then reconnected, and the existing element which was left in the DOM becomes the active view. This also allows for scroll position of previous views to be maintained.

Interesting, so I tried it and it's really smooth.

However, I come across a severe UX issue:

Basically, my app is composed of 2 tabs.

• TabA aims to display a load and list items.
• TabB aims to display other items.

Each one has its own navigation: listing and showing specific items.
Obviously, the first time, data are fresh, but then, since cached => stale.

Cached views is really adapted to the "back" button from the "show" to the "list" of a specific tab.
Indeed, scroll is maintain and controllers don't need to reload => very good performance.

However, what a user wants when he clicks on a particular tab is to get a refreshed list.

I really can't find a pretty and efficient way to refresh a specific cached view regarding the clicked element.

I've got those declared states (showing the example for TabA):

        .state('tab', {
            url: "/tab",
            abstract: true,
            templateUrl: "/tabs.tpl.html",
            controller: 'TabsCtrl'
        })

        .state('tab.tabAList', {
            url: '/items',
            views: {
                'tab-a': {
                    templateUrl: '/tabAList.tpl.html',
                    controller: 'TabACtrl'
                }
            }
        })

        .state('tab.tabAShow', {
            url: '/tabAList/:itemId',
            views: {
                'tab-a': {
                    templateUrl: '/tabAShow.tpl.html',
                    controller: 'TabAShowCtrl'
                }
            }
        });

So, tab's controller is the parent of tab.tabAList and tab.tabAShow.

tabList contains a function like:

$scope.reloadItems = function() {
    //...
}

How to trigger this function when tabA is clicked?
The tricky part is that TabsCtrl code is run just before nested TabAList controller is run.
I tried to involve a $rootScope.$broadcast('reloadTheItems',...) under the on-select attribute of the tab.
But the event is missed since tabAList hasn't run yet at the time of the event sending.

Has anyone experienced it and has a pretty solution? I repeat, the goal is: "Reload a specific cached view on tab click".

Answer 1

You should listen to the $ionicView.enter event for the view for TabA.

Then do this from the $scope:

        $scope.$on( "$ionicView.enter", function( scopes, states ) {
            if( states.fromCache && states.stateName == "tab.tabAList" ) {
                reloadItems();
            }
        });

...or something similar...