Question

我想要重装功能，但我发现了一些困难。

我的应用应该使用重新加载功能清除所有数据并再次获取Feed。有效的事件，但它只显示前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');
        });
  };
})

如何使用无限滚动重新加载/刷新

1 个答案: