Reload states after transition

ionic-v1
1

I have a simple master detail workflow. On the master state I transition to the detail state by passing the id. On the detail, I update some fields, and save the changes. In the save callback, I want to transition back to the master state. So far the navigation works great, the only issue I have is that the master state does not reload the view. The resolve property of the master is called correctly but it seems the controller does not refresh the data. I know there was a bug in ui-router but it’s fixed in 0.2.12 and Ionic uses 0.2.13. https://github.com/angular-ui/ui-router/issues/582

Master: The master calls a POST to create a dashboard, followed by a GET to retrieve the data from that dashboard. This is done in the resolve part. I added some code in the controller to check if it has been reloaded. So I can see reload!!! in the console, when I reach that state. So far so good.

dashboard.config(function ($stateProvider) {
	$stateProvider
		.state('dashboard', {
			url: "/dashboard",
			resolve: {
				'dashboard': ['Dashboards', 'Restangular', function (Dashboards, Restangular) {
					return Dashboards.post().then(function (result) {
						return Restangular.oneUrl('newDash', result.data).get();
					});
				}]
			},
			templateUrl: "./app/dashboard/dashboard.html",
			controller: 'DashboardCtrl'
		});

});

dashboard.controller('DashboardCtrl', ['$scope', 'dashboard', function ($scope, dashboard) {

	$scope.drafts = dashboard.data.drafts;
	// Code to check if controller is reloaded
	$scope.x = '';
	$scope.reload = function() { console.log('Reload');$scope.x += 'reload!!!' };
	$scope.reload();

}]);

Detail: The user clicks on update button that triggers $scope.update which calls a PUT (Restangular) and transition back to the master in the success callback. The transition works but I don’t see the reload!!! in the console when I reach the master. I also see the old data. If I click F5, the new data are displayed.

$scope.update = function () {
	item.data.put().then(function () {
		console.log("updated");
		//$state.go('dashboard', {}, {reload: true, inherit: true, notify: true});
		$state.go('dashboard');
	});
}
2

on last day i am facing the same issue, and got a solution, may be its work for you,

in .run i added an statechange event, and inside it i clear cache of ionic, please try this code

app.run(function($ionicPlatform, $rootScope, $ionicHistory) {
   $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){
      $ionicHistory.clearCache();
   });
});
3

It works because you are disabling the cache which can cause a performance issue. It seems that the reload is not working if the view is already cached. Is there a way to force the reload?

4

yes i found another way on forums, which is

$state.go( ‘home’, {}, { reload : true } )

but its not working, then i found the solution which i mentioned on previous comment. and used that on mobile app, in which html files (views) are in placed in phone, so i am not facing any much performance issue.

5

@srehanuddin can you share the full solution. pls

6 
app.run(function($ionicPlatform, $rootScope, $ionicHistory) {
    $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){
         $ionicHistory.clearCache();
    });
});

@sanchit please try this code by placing inside your app.run method

7

@srehanuddin its not working for me

8

Set Cache:false, for that particular state in config…

9

I am in a particular situation where i want to create a comment in a different view. When submitted, i want to redirect to the comments view and refresh the comments. I dont want to use cache: false, because when the submit comment view is canceled, the comments are refreshed and will clear the history, which i dont want.

reload: true would be the optimal solution, so why is this not working?