2016-07-10 4 views
0

다시로드 기능을 사용하고 싶지만 몇 가지 어려움을 발견했습니다.무한 스크롤로 다시로드/새로 고침하는 방법

내 앱에서는 reload 기능을 사용하여 모든 데이터를 지우고 피드를 다시 가져와야합니다. 이벤트는 작동하지만 처음 5 개의 뉴스 (페이지 당 내 API의 제한) 만 표시되며 loadMore 함수는 완전히 무시됩니다.

공장

.factory('newsDataService', function($http) { 
return { 
    GetPosts: function(page) { 
    return $http.get("http://newsapi.domain.tdl/"); 
    }, 
    GetMorePosts: function(page) { 
    return $http.get("http://newsapi.domain.tdl/?page=" + page); 
    } 
    }; 
    }) 

컨트롤러

.controller('NewsCtrl', function($scope, newsDataService) { 
$scope.page = 1; 
$scope.noMoreItemsAvailable = false; 

newsDataService.GetPosts().then(function(items){ 
    $scope.items = []; 
    $scope.items = items.data.response; 
}); 

$scope.Reload = function() { 
    console.log('reload'); 
    newsDataService.GetPosts().then(function(items){ 
     console.log(items); 
     $scope.items = items.data.response ; 

     $scope.noMoreItemsAvailable = false; 
     $scope.$broadcast('scroll.refreshComplete'); 
     }) 
    }; 

    $scope.loadMore = function(argument) { 
    $scope.page++; 
    newsDataService.GetMorePosts($scope.page).then(function(items){ 
      if (items.data.response) { 
      $scope.items = $scope.items.concat(items.data.response); 
      $scope.noMoreItemsAvailable = false; 
      } else { 
      $scope.noMoreItemsAvailable = true; 
      } 
     }).finally(function() { 
     $scope.$broadcast("scroll.infiniteScrollComplete"); 
     }); 
    }; 
}) 

템플릿 :

<ion-view view-title="News"> 
<ion-content> 
<ion-refresher on-refresh="Reload()"></ion-refresher> 
<div class="list"> 
<a collection-repeat="news in items" href="#/app/newsreader/{{news.id}}" class="item item-thumbnail-left"> 
    <h2>{{news.headline}}</h2> 
    <div class="item-text-wrap" ng-bind-html="news.teaser"></div> 
    </a> 
    </div> 
    <ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="loadMore()" distance="1%"></ion-infinite-scroll> 
    </ion-content> 
    </ion-view> 

어떻게이 문제를 해결할 수 있습니까?

답변

0

그냥 해결책을 찾았습니다.

.controller('NewsCtrl', function($scope, newsDataService) { 
$scope.items =[] 
$scope.page = 1; 

newsDataService.GetPosts().then(function(items){ 
    $scope.items = items.data.response; 
}); 

$scope.Reload = function() { 
     console.log('reload'); 
     $scope.items =[]; 
     $scope.page = 1; 
     $scope.loadMore(); 
    }; 

    $scope.loadMore = function(argument) { 

    $scope.page++; 
    newsDataService.GetMorePosts($scope.page).then(function(items){ 
      if (items.data.response) { 
      $scope.items = $scope.items.concat(items.data.response); 
      $scope.noMoreItemsAvailable = false; 
      } else { 
      $scope.noMoreItemsAvailable = true; 
      } 
     }).finally(function() { 
     $scope.$broadcast("scroll.infiniteScrollComplete"); 
     $scope.$broadcast('scroll.refreshComplete'); 
     }); 
    }; 
}) 
관련 문제