How to reload ion view?

Question

I created an application based on sidemenu, since after logging in I show several tasks. If I click on a task, it will be redirected to the task details page, on this page I will be able to update the tasks.

Therefore, after updating the task, I need to return to the previous page of the task list. I am using $ionicHistory.goBack(); for refund.

My problem after that, I need to update the task list, that is, the updated task should not be in the task list. How to update / reload task list?

Answer 1

If you bind your task to the tasks array that will be used on the task list page, it should be automatically updated.

But the question is not to display new tasks (still my previous sentence should work), if not, performance considerations of ionic representations are cached, so when you return to the previous view, it does not go through the usual loading cycle. But you have 2 options

1 - disable caching using <ion-view cache-view="false" view-title="My Title!"> In ion-view , but this is not a very elegant solution. read more

2 - use ionRefresher (my option). read more here

Answer 2

https://github.com/angular-ui/ui-router/issues/582

according to @ hpawe01 "If you are using the current ion diagram (ionic: v1.0.0-beta.14, angularjs: v1.3.6, angular -ui-router: v0.2.13), a problem with a non-controller-controller may be caused the new ionic caching system: Please note that since we cache these views, we don’t destroy the areas. Instead, the areas are disconnected from the scan cycle. Since the areas are not destroyed and recreated, the controllers do not load again during the next viewing. There are several ways to disable caching. disable it for just one state, simply add the cache: false to state the definition of a fixed the problem for me (after hours of reading attempts, frustration) For the rest, do not use ion scheme and still facing this problem:.. good luck! "

Hope this helps.

Answer 3

You can also listen to ionic events such as $ionicView.enter on $scope , and run code that updates the list if you haven't linked your list to the @ sameera207 clause.

EG:

 // List.controller.js angular.module('app') .controller('ListController', ['$scope', function($scope) { // See http://ionicframework.com/docs/api/directive/ionView/ for full events list $scope.$on('$ionicView.enter', function() { _someCodeThatFetchesTasks() .then(function(tasks) { $scope.tasks = tasks; }); }); }); 

Keep in mind that this is not the right way (if that works at all), and if you do, you probably have a design flaw. Instead, you should use the same data array through factory or service , for example.

Answer 4

For your task, you can also use ion-nav-view .

This is well documented. And if you are using the beta version of Ionic 2, you can use some of them, for example, onPageWillLeave() or onPageWillEnter() . I just ran into the same problem and defined the refresh () function, but the user had to click on the button to actually refresh the view. But then I discovered:

https://webcake.co/page-lifecycle-hooks-in-ionic-2/

You just need to import the page module and NavController, and also define it in the constructor. You can use, for example, onPageWillEnter (), which will always be called upon re-viewing:

 onPageWillEnter() { // Do whatever you want here the following code is just to show you an example. I needed it to refresh the sqlite database this.storage.query("SELECT * FROM archivedInserates").then((data) = > { this.archivedInserates =[]; if (data.res.rows.length > 0) { for (var i = 0; i < data.res.rows.length; i++) { this.archivedInserates.push({userName:data.res.rows.item(i).userName, email: data.res.rows.item(i).email}); } } },(error) =>{ console.log("ERROR -> " + JSON.stringify(error.err)); }); } 

With ion beta 8, lifecylcle events changed their names. Check out the official ion block for a complete list of life cycle events.

Answer 5

if you are creating a data-driven application, then be sure to use $ionicConfigProvider.views.maxCache(0); in your app.config so that each review can be updated for more details. http://ionicframework.com/docs/api/provider/ $ ionicConfigProvider /