I have an ng-repeat list that goes to a details page (which has a back button). The $scope.items variable is loaded from a get request that occurs when the page is first loaded, with my refreshItems() function.
When you click the back button on the details page, you are taken back to the correct page, but the list is not refreshed. I need this list to refresh so the new items are loaded and shown.
I thought that I could simply hook up the Back button to an ng-click function that uses ionicHistory to go back, and then calls my refreshItems() function; however, this does not reload the items on the first page.
The above attempt does go back to the last page and trigger the refreshItems() function (and the new data is loaded, which I can see thanks to console.log() statements), but I'm guessing the ng-repeat needs to be rebuilt. I found some information on $scope.$apply() as well as $route.reload() but neither of these fixed the problem when I placed them at the end of my goBack() function.
controller.js
$scope.refreshItems = function() {
console.log("Refreshing items!");
$http.get('http://domain/page.aspx').then(function(resp) {
$scope.items = resp.data; console.log('[Items] Success', resp.data);
}, function(err) { console.error('ERR', err); });
};
$scope.goBack = function() {
$ionicHistory.goBack();
$scope.refreshItems();
};
Main Page HTML
<div class="list">
<a ng-repeat="i in items" class="item" href="#/tab/details?ID={{i.Item_ID}}">
<b>Item {{i.Item_Name}}</b>
</a>
</div>
Back Button on Details Page
<ion-nav-bar>
<ion-nav-back-button class="button-clear" ng-click="goBack();">
<i class="ion-arrow-left-c"></i> Back
</ion-nav-back-button>
</ion-nav-bar>
I have a refresher on the main page which calls refreshItems() - and it refreshes them correctly. The problem is most certainly when I try to pair refreshing with either $ionicHistory.goBack() or $state.go(). Is there a way I can programmatically call the refresher (after/on load), since directly calling the function that refresher is calling is not working?
A better way.
you just need set cache flag in ionicConfigProvider
Disable cache within state provider
$stateProvider.state('mainPage', {
cache: false,
url : '/dashboard',
templateUrl : 'dashboard.html'
})
offical manual at here http://ionicframework.com/docs/api/directive/ionNavView/
All Ionic views are cache http://ionicframework.com/docs/api/directive/ionView/
You can stop the caching by setting
cache-view="false"
of the view you don't want the caching to happen.
I figured out a solution for this!
The solution is to use the $scope.$on('$stateChangeSuccess') function. Either check the to/from view with function parameters, or use $location.path():
$scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
console.log("State changed: ", toState);
if ($location.path() == "/tab/main") {
$scope.refreshItems();
}
}
You can also broadcast an event from the detail page and listen for this event in the listing controller.