Im building a mobile application with Cordova and AngularJs using the Ionic framework, 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. 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>
Thx for the help
This occurs because the view is not refreshed by itself.
You have several options to get what you need, one with a pull to refresh is widely used in native or hybrid applications.
Besides a touch to your application. Or use the properties of ionic views is for you.
Basically you can handle that occurs when entering for the first time, when he turns or before leaving. If you delete a value and want to refresh your view with the new actual data, we recommend using the pull to refresh and
$ionicView.beforeEnter
You can use the $ionicView.enter
event in order to reload your posts like so:
$scope.$on('$ionicView.enter', function () {
console.log('when the view is loaded!');
// Reload your posts here...
});
I don't know what your UX is like, but the suggestion made by @sioesi is a nice, native approach to it.