How to show newest items on the list when reloading view

ionic-v1
1

Im building a new App using Ionic and retrieving the data using a Restfull Api on my wordpress website.

My problem is that when i delete a post or add a new post in Wordpress, and after reloading the application on my navigator, or when i close and reopen the application on my Android emulator, the view is not reloading and still showing some old data. I tried to disable the cache on the view, but the problem is still there.

Here is my 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');
});

My 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("...", "...", ...", "...");
    }
});

And my view:

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

And thx for the awesome work guys. :thumbsup:

2

Anyone please ? im still facing this problem.

3

wildguess make every request unique to prevent caching
id=’+$stateParams.postId+’&json_unescaped_unicode=1&noCache=’) + new Date().getTime()

4

@BramVanDerVoet thx for ur answer.
Well this Hack worked good, but it disabled all the fancy ionic features based on cache, like keeping the items loaded and the scroll-y the same when backing from a single post page etc…

What would be really correct for me is to controll the cached view, i mean, i dont want it to be reloaded everytime i reopen the view, but at leass when i close and reopen my application, or when i let my app opened for a specific time.

One more think : I tried the ion-refresher to refresh my view using this function :

$scope.doRefresh = function() {
    	$http.get('http://example.com/api/get_category_posts/?category_id='+$scope.categoryId+'&json_unescaped_unicode=1&count=2')
    	.success(function(newItems) {
    		var old_posts=$scope.posts;
    		$scope.posts=newItems.posts.concat(old_posts);
    	})
    	.finally(function() {
    		// Stop the ion-refresher from spinning
    		$scope.$broadcast('scroll.refreshComplete');
    	});
    };

And it work good adding 2 new items in my list ( They may already exist in my view, but i can fix that problem later) but the problem is still there because the ion cache only save the http requests but not the view items list (as i guess), cuz when i leaved the list view and came back the new items where no more there

5

sorry can’t help I think… I would put a resolve in the (abstract) state(‘app’,) (see it as the toplevel where you keep things that lower levels need) combined with service/factory for load and refresh the scope/data. And refresh views when you need too or according to plan.

6

Consider use angular service instead of a scope object to do this(save data). A service object is available throughout whole angular app lifecycle and across controllers.

Then use

$scope.service=service

Then you can use it in the view. Because service is singleton. Just update it anywhere. Your view will be updated as well after any digest cycles.

7

Thx @BramVanDerVoet for ur help buddy.

@windht i will try to replace my http queries, using factories instead . Thank you

8

This demo is very revealing :slight_smile: (including http promised factory)