Question

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

因此，在更新任务后，我需要返回上一个任务列表页面。我正在使用$ionicHistory.goBack();返回。

我的问题是在回来之后，我需要刷新任务列表，即更新的任务不应该在任务列表中。如何刷新/重新加载任务列表？

Answer 1

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

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

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

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

Answer 2

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

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

希望这会有所帮助。

Answer 3

您还可以在$ionicView.enter上收听离线事件，例如$scope，如果您未将列表绑定为@ 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 4

对于您的任务，您还可以使用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));
    });
}

对于离子β8，生命周期事件改变了他们的名字。查看official ionic blog以获取生命周期事件的完整列表。

Answer 5

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

如何重新加载离子视图？

5 个答案: