离子 - 单击后退按钮时,重新加载并以ng-repeat显示新数据

Question

背景

我有一个ng-repeat列表进入详细信息页面(有一个后退按钮).该$scope.items变量是从首次加载页面时出现的get请求加载的,带有我的refreshItems()函数.

问题

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

试图解决方案

我以为我可以简单地将Back按钮连接到一个ng-click用来返回的函数,ionicHistory然后调用我的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>

---

可能的方向？

我refresher在主页上有一个调用refreshItems()- 它正确地刷新它们.这个问题肯定是,当我尝试配对清爽与任一$ionicHistory.goBack()或$state.go().有没有办法可以通过编程方式调用刷新器(加载后/加载),因为直接调用刷新器调用的函数不起作用？

Answer 1

设置缓存标志ionicConfigProvider.在州提供程序中禁用缓存,如下所示

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

有关详细信息,请参阅手册

Answer 2

所有Ionic视图都被缓存 ; 防止缓存如下:

cache-view="false"

例如:

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

Answer 3

我想出了一个解决方案！

解决方案是使用该$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();
    }

}