Marco Marco - 4 months ago 184
AngularJS Question

Refreshing page on a back button in angular/ionic

I am trying to refresh the page on the back button to get the new data for article list. To be more specific I have an article list, and the article page, on both of them I have an option of liking an article. When a user likes an article on the article page, if it hits the back button the like icon on the article list page won't get refreshed with the new state. I have tried with making a function on clicking the back button, and then getting the data again, but the icon doesn't change. The data that I get on

console.log
is new data and I get the value for
like=1
which is correct if the user has liked the article, but the icon doesn't change.
This is my code:

I get the articles like this in my front page controller:

ArticleService.all().then(function(data){
$scope.articles = data;
})


In my article page html I have a back button link:

<a ng-click="refresh()"></a>


And in my article list I check which value I have for like and then show the icon according to that:

<a ng-if="article.like == 1" ng-click="like(article)" class="subdued">
<img class="social-images" src="icons/heart.svg"/> Lik
</a>
<a ng-if="article.like == 0" ng-click="like(article)" class="subdued">
<img class="social-images" src="icons/heart-outline.svg"/> Lik
</a>


This is my function in the article controller:

$scope.refresh = function (){
return $state.go('main.front').then(function(state) {
ArticleService.all().then(function(data){
$scope.articles = data;
console.log(data);
})
})
};


But since that function is in the article controller it cannot refresh the data on the front page. How can I refresh the data in the front page controller from the page that has a different controller?

Ved Ved
Answer

Try one of these:

1.

 $scope.$on('$ionicView.beforeEnter', function () {
           $scope.refresh();
        });

$scope.refresh = function (){
        return $state.go('main.front').then(function(state) {
          ArticleService.all().then(function(data){
            $scope.articles = data;
            console.log(data);
          })
        })
      };

2.

 $scope.$on('$tateChangeSuccess', function () {
           $scope.refresh();
        });
  1. It may be cache issue. So add,
<ion-view cache-view="false" view-title="My Title!">
  </ion-view>