I am currently using the most recent Ionic "nighty build" version.
One great feature of this version is the introduction of cached views:
By default, views are cached for improved performance. When a view is navigated away from, its element remains in the DOM and its scope is disconnected from the cycle. Upon navigating to a cached view, its scope is reconnected, and the existing element in the DOM becomes the active view, preserving scroll position from previous views.
I decided to try it out and found it to be very smooth.
However, I have encountered a significant UX issue:
My app consists of 2 tabs.
- TabA is meant to display a load and list items.
- TabB is meant to display other items.
Each tab has its own navigation: listing and displaying specific items.
Initially, data is fresh but becomes stale due to caching.
Cached views work well with the "back" button transition between the "show" and "list" of a tab.
Maintained scroll positions and no need for controller reloads provide excellent performance.
However, when a user clicks on a particular tab, they expect to see a refreshed list of items.
I am struggling to find an elegant and effective way to refresh a specific cached view corresponding to the clicked element.
The following states are declared (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'
}
}
});
Thus, tab's controller is the parent of both tab.tabAList and tab.tabAShow.
tabList includes a function like:
$scope.reloadItems = function() {
//...
}
How can I trigger this function when tabA is clicked?
The challenge lies in running TabsCtrl code just before the nested TabAList controller runs.
I attempted to use
$rootScope.$broadcast('reloadTheItems',...)on-select attribute of the tab.However, the event gets missed as
tabAList has not executed at that time.
Has anyone faced this issue and found a solution? To reiterate, the objective is: "Refresh a specific cached view upon tab click".