如何使用無限滾動重新加載/刷新

Question

我想要重載功能，但是我發現有一些困難。

我的應用程序應該使用重載功能清除所有數據並再次獲取供稿。事件有效，但它只顯示前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> 

我怎樣才能解決這個問題？

Answer 1

剛剛找到了我自己的解決方案。

.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'); 
     }); 
    }; 
})