如何重新加载离子视图？

Question

我创建了一个基于侧边菜单的应用程序，在登录后我会显示一些任务。如果我单击任务，它将重定向到任务详细信息页面，在该页面中我可以更新任务。

所以在更新任务后我需要返回到之前的任务列表页面。我正在使用 $ionicHistory.goBack(); 返回。

我的问题是回来后，我需要刷新任务列表，即任务列表中不应该有更新的任务。我怎样才能refresh/reload任务列表？

Answer 1

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

根据@hpawe01“如果您正在使用当前的离子框架（离子：v1.0.0-beta.14，angularjs：v1.3.6，angular-ui -router: v0.2.13), not-reloading-controller 的问题可能是由 ionic 的新缓存系统引起的：请注意，因为我们正在缓存这些视图，所以我们并没有破坏范围。相反，作用域正在与监视周期断开连接。因为范围没有被销毁和重新创建，所以控制器不会在后续查看时再次加载。有几种方法可以禁用缓存。要仅针对单个状态禁用它，只需将 cache: false 添加到状态定义中。这为我解决了问题（经过数小时的阅读、尝试、挫折）。对于所有其他不使用 ionicframework 并且仍然面临这个问题的人：祝你好运！

希望这对您有所帮助。

Answer 2

如果您将任务绑定到 tasks 数组，它将在 task list 页面中使用，它应该会自动更新。

但问题是不显示，新添加的任务（仍然是我之前的建议应该有效）如果没有，性能原因离子视图被缓存，所以当你回到以前的视图时它不会通过正常加载周期。但是你有2个选项

1 - 通过在 ion-view 中使用 <ion-view cache-view="false" view-title="My Title!"> 禁用 caching，但这不是一个非常优雅的解决方案。 read more

2 - 使用 ionRefresher（我的首选）。 read more here

Answer 3

对于您的任务，您还可以使用 ion-nav-view。

有据可查。如果您现在正在使用 Ionic 2 beta，则可以使用一些视图生命周期挂钩，例如 onPageWillLeave() 或 onPageWillEnter()。我刚刚遇到同样的问题并定义了一个 refresh() 函数，但用户必须单击一个按钮才能实际更新视图。但后来我发现：

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

您只需导入 Page 和 NavController 模块，并在构造函数中定义它们。您可以使用例如 onPageWillEnter()，当您再次访问视图时它将始终调用：

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));
    });
}

在 ionic beta 8 中，生命周期事件更改了名称。查看 official ionic blog 以获取生命周期事件的完整列表。

Answer 4

您还可以在 $scope 上收听 $ionicView.enter 等离子事件，如果您没有按照 @sameera207 的建议绑定列表，则可以触发刷新列表的代码。

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;
            });
    });

});

请记住，这不是最正确的方法（如果完全正确的话），如果您这样做，您肯定有设计缺陷。相反，您应该通过 factory 或 service 共享相同的数据数组。

Answer 5

如果您正在构建数据驱动的应用程序，那么请确保在您的 app.config 中使用 $ionicConfigProvider.views.maxCache(0); 以便每条评论都可以刷新以获取更多详细信息阅读此 http://ionicframework.com/docs/api/provider/$ionicConfigProvider/

如何重新加载离子视图？

How to reload the ionic view?

angularjs

cordova

ionic-framework

ionic