Ionic/AngularJS：重新加载视图时如何在列表中显示最新项目答案

【问题标题】：Ionic/AngularJS : How to show newest items on the list when reloading viewIonic/AngularJS：重新加载视图时如何在列表中显示最新项目
【发布时间】：2015-01-30 01:22:02
【问题描述】：

我正在使用 Ionic 框架使用 Cordova 和 AngularJs 构建一个移动应用程序，并在我的 WordPress 网站上使用 Restful API 检索数据。

我的问题是，当我在 Wordpress 中删除帖子或添加新帖子，在导航器上重新加载应用程序后，或者在我的 Android 模拟器上关闭并重新打开应用程序时，视图不会重新加载。我试图禁用视图上的缓存，但问题仍然存在。

这是我的 app.js：

angular.module('starter', ['ionic','ngCordova', 'starter.services', 'starter.controllers'])

    .run(function($ionicPlatform) {
        $ionicPlatform.ready(function() {
            if (window.cordova && window.cordova.plugins.Keyboard) {
                cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
            }
            if (window.StatusBar) {
                // org.apache.cordova.statusbar required
                StatusBar.styleDefault();
            }
        });
    })

    .config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) {
        $stateProvider

            .state('app', {
                url: "/app",
                abstract: true,
                templateUrl: "templates/menu.html",
                controller: 'AppCtrl'
            })

            .state('app.latest_posts', {
                url: "/latest_posts/:categoryId",
                views: {
                    'menuContent': {
                        templateUrl: "templates/latest_posts.html",
                        controller: 'LatestPostsCtrl'
                    }
                }
            })

            .state('app.single', {
                url: "/single/:postId",
                views: {
                    'menuContent': {
                        templateUrl: "templates/single.html",
                        controller: 'SingleCtrl'
                    }
                }
            });
        // if none of the above states are matched, use this as the fallback
        $urlRouterProvider.otherwise('/app/latest_posts/15');
    });

我的 controllers.js：

angular.module('starter.controllers', [])

.controller('AppCtrl', function($scope, $ionicModal, $timeout) {
})

.controller('LatestPostsCtrl', function($scope,$stateParams,$http,Posts,$window) {
    $scope.posts=[];
    $scope.categoryId=$stateParams.categoryId;
    $scope.page=1;
    $scope.loadMore = function() {
        $http.get('http://example.com/api/get_category_posts/?category_id='+$scope.categoryId+'&json_unescaped_unicode=1&count=8&page='+$scope.page)
        .success(function(items) {
            $scope.posts = $scope.posts.concat(items.posts);
            $scope.$broadcast('scroll.infiniteScrollComplete');
            $scope.category_name=items.category['title'];
            if(items.category['title']=='slide')
                $scope.category_name='آخر الأخبار';
            $scope.page +=1;
        })
        .error(function(data, status, headers, config) {
            alert('No Connexion');
        })
        .finally(function() {
            $scope.$broadcast('scroll.refreshComplete');
        });
    };

})

.controller('SingleCtrl',function($scope,$stateParams,$http,Post,$cordovaSocialSharing) {
    $http.get('http://example.com/api/get_post/?id='+$stateParams.postId+'&json_unescaped_unicode=1')
    .success(function(items) {
        $scope.data = items;
    })
    .error(function(data, status, headers, config) {
        alert('No Connexion');
    });

    $scope.shareAnywhere = function() {
        $cordovaSocialSharing.share("...", "...", ...", "...");
    }
})

我的看法：

<ion-view view-title="{{category_name}}" class="posts-view" >
    <ion-content>
        <ion-list class="list card posts">
            <ion-item ng-repeat="post in posts" href="#/app/single/{{post.id}}" class="repeated-item">
                <span class="thumb">
                    <img ng-src="{{post.thumbnail_images['barlamane-single-post-thumb'].url}}" />
                </span>
                <span class="title" ng-bind-html="post.title"></span>
            </ion-item>
        </ion-list>
        <ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="loadMore()" distance="1%"></ion-infinite-scroll>
    </ion-content>
</ion-view>

【问题讨论】：

我对 Cordova 不熟悉，但似乎视图没有重绘或者控制器没有重新初始化。是否可以监控网络以检查 API 调用是否得到正确的结果？
我认为控制器正在重新初始化，我知道通过在 chrome 上调试（使用 console.log :
你试过在 ionic 中禁用 cache 吗？
是的，我使用了 3 种方法，但问题仍然存在。我什至重新创建了该项目，认为之前的项目可能已损坏，但没有任何线索。
这很奇怪。是否可以在您的响应中添加一些标头，例如 ETag 或 Cache-Control？我不确定您是否可以在您的 Wordpress 后端执行此操作。

标签： angularjs cordova ionic-framework

【解决方案1】：

这是因为视图没有自行刷新。

您有多种选择来获得所需的内容，其中一种具有拉动刷新功能，广泛用于本机或混合应用程序。

pull to refresh

除了触摸您的应用程序。或者使用离子视图的属性是适合你的。

ion-view directive

基本上你可以处理第一次进入时、他转身时或离开前发生的情况。如果您删除一个值并想用新的实际数据刷新您的视图，我们建议使用拉取刷新和

$ionicView.beforeEnter

【讨论】：

【解决方案2】：

您可以使用$ionicView.enter 事件来重新加载您的帖子，如下所示：

$scope.$on('$ionicView.enter', function () {
    console.log('when the view is loaded!');

    // Reload your posts here...
});

我不知道你的用户体验是什么样的，但@sioesi 提出的建议是一种很好的原生方法。

【讨论】：