Ionic

Question

背景

我有一个 ng-repeat 列表，可以转到详细信息页面（其中有一个后退按钮）。 $scope.items 变量是从第一次加载页面时发生的获取请求加载的，使用我的 refreshItems() 函数。

问题

当您单击详细信息页面上的后退按钮时，您会返回到正确的页面，但列表不会刷新。我需要刷新此列表，以便加载和显示新项目。

尝试的解决方案

我想我可以简单地将后退按钮连接到一个使用 ionicHistory 返回的 ng-click 函数，然后调用我的 refreshItems() 函数；但是，这不会重新加载第一页上的项目。

上面的尝试确实返回到最后一页并且触发了refreshItems()函数（并且新数据是已加载，感谢 console.log() 语句，我可以看到），但我猜 ng-repeat 需要重建。我在 $scope.$apply() 和 $route.reload() 上找到了一些信息，但是当我将它们放在 goBack() 函数的末尾时，这些都没有解决问题。

代码摘录

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

主页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>

详细信息页面上的后退按钮

<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>

可能的方向？

我在调用 refreshItems() 的主页上有一个 refresher - 它会正确刷新它们。当我尝试将刷新与 $ionicHistory.goBack() 或 $state.go() 配对时，问题肯定是存在的。有没有一种方法可以以编程方式调用刷新器（after/on 加载），因为直接调用刷新器正在调用的函数不起作用？

Answer 1

所有 Ionic 视图都是 cached；防止缓存如下：

cache-view="false"

例如：

<ion-view view-title="Title" cache-view="false">

Answer 2

我找到了解决办法！

解决方法是使用$scope.$on('$stateChangeSuccess')函数。使用函数参数检查 to/from 视图，或使用 $location.path():

$scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {

    console.log("State changed: ", toState);

    if ($location.path() == "/tab/main") {
        $scope.refreshItems();
    }

}

Answer 3

在ionicConfigProvider中设置缓存标志。如下禁用状态提供程序中的缓存：

$stateProvider.state('mainPage', {
   cache: false,
   url : '/dashboard',
   templateUrl : 'dashboard.html'
})

详情见manual。

Answer 4

您还可以从详细信息页面广播事件，并在列表控制器中监听此事件。

http://www.dotnet-tricks.com/Tutorial/angularjs/HM0L291214

Ionic - 单击后退按钮时重新加载并在 ng-repeat 中显示新数据

Ionic - Reload and display new data in ng-repeat when clicking back button

angularjs

angularjs-ng-repeat

angularjs-routing

ionic-framework

背景

问题

尝试的解决方案

代码摘录

可能的方向？