服务在Angular中动态加载数组中的新内容

时间:2015-12-02 14:09:02

标签: angularjs service

我想将外部JSON内容加载到我的控制器范围中。开始我的前十项的范围是没有问题的。但我想要的是用新项目(通过滚动)动态扩展范围

由于某些原因,当我尝试运行loadNews(counter)函数时,分页在我的服务中不起作用。但是,当我在服务中记录http get的响应结果时,会显示正确的数据。

当我扩展范围newsitems时,它会被扩展,但仅限于第一页项目。

这是我的一点代码。

app.service('newsService', function ($http, $q) {
   var deferred = $q.defer();
   var deferred2 = $q.defer();
   this.loadNews = function (counter) {
    if (counter == undefined) {
        $http.get('http://domain.com/wp- json/wp/v2/posts').then(function (response) {
        deferred.resolve(response);
      });
      return deferred.promise;
    } else {
          console.log(counter); // This returns a correct counter
          $http.get('http://domain.com/wp-json/wp/v2/posts?page=' + counter).then(function (response) {
          deferred2.resolve(response);
      });
      return deferred2.promise;
    }

  } 
});

app.controller('homeNewsCtrl', function ($scope, $http, $timeout, $cordovaSplashscreen, newsService) {

  $scope.count = 1;

  var promise = newsService.loadNews();
  promise.then(function (response) {
    $scope.newsItems = response.data;
  });

  $scope.loadMore = function (counter) {
    $scope.count += counter;
    var promise = newsService.loadNews($scope.count);
    promise.then(function (response) {
      $scope.newsItems.push.apply($scope.newsItems, response.data);
    });
  };
});

1 个答案:

答案 0 :(得分:0)

最终我想出了一个工厂解决方案。这对我有用。

app.factory('newsItems', function ($http) {
  return {
    getNews: function (counter) {
      if (counter != undefined) {
        return $http({
          url: 'http://www.domain.com/wp-json/wp/v2/posts?page=' + counter,
          method: 'GET'
        })
      } else {
        return $http({
          url: 'http://www.domain.com/wp-json/wp/v2/posts',
          method: 'GET'
        })
      }
    }
  }
});


$scope.loadMoreNews = function (counter) {
    $scope.count += counter;
    newsItems.getNews($scope.count).then(function (response) {
      $scope.newsItems.push.apply($scope.newsItems, response.data);
    });
};