2016-07-10 9 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'); 
     }); 
    }; 
}) 
関連する問題