Javascript 离子框架无限滚动与http获取数据

我刚刚开始使用ionic框架（brilliant），我对angular是个新手。我有一个web服务正在运行，应用程序应该加载数据。我已经成功地检索了数据，放置，WordPress rest API正在以页面的形式发送数据，我不知道如何通过选项卡上的

infinite scroll

实现这一点，以下是我的HTML标记：

<ion-view title="All Wallpapers">
  <ion-content ng-controller="MyCtrl">
    <div class="row" >
    <div ng-controller="PostsController" >
        <div ng-repeat="post in posts">
            <div class="col col-50">
                    <div class="list card">
                          <div class="item item-image">
                            <img ng-src="{{post.thumbnail}}"></>
                          </div>
                          <a class="item item-icon-left assertive" href="#">
                            <i class="icon ion-android-image"></i>
                            {{post.thumbnail_images.full.width}} x {{post.thumbnail_images.full.height}}
                          </a>
                    </div>
            </div>
    </div>
  </div>
  </div>
     <ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="loadMore()" distance="1%"></ion-infinite-scroll>
 </ion-content>
</ion-view>

第二个函数加载数据，但不将其附加到原始数据。 谢谢你抽出时间

另外，我看过很多代码笔的例子，但是，我似乎无法让它们工作

编辑：

好的，我已经设法缩小了问题的范围。我误用了控制器 现在我得到了数据，但新数据替换了旧数据

  function MyController($scope, $http) {
  $scope.posts = [];
  $scope.page=1;
  $scope.loadMore = function() {
    $http.get('http://wallweight.com/api/get_recent_posts?page='+$scope.page).success(function(items) {
      $scope.posts=items.posts;
      console.log(items.posts);
      $scope.$broadcast('scroll.infiniteScrollComplete');
      console.log($scope.page);
      $scope.page +=1;
    });
  };

我理解

$scope.posts=items.posts

是错误的，我只是找不到附加它的方法。

让它工作了：）

---

谢谢你，这节省了我几个小时

我修改了我的，为我的工厂使用

$resource

，但本质上是一样的

    $scope.loadMore = function() {
    moreNewsletters = WPFactory.query({
        'page' : $scope.pageNum,
    'filter[posts_per_page]': 10,
    param1: 'posts',
    'filter[cat]': 8,
    'filter[orderby]': 'ID',
    }, function(data,responseHeaders) {

        angular.forEach(moreNewsletters, function(value, key) {
        value.image1 = ThumbnailFactory.getThumbnail(value.content);
    });

 var i = data.length;
 $scope.newsletters = $scope.newsletters.concat(data);
 $scope.newsletters.push(data);
  $scope.$broadcast('scroll.infiniteScrollComplete');
  $scope.pageNum +=1;
    });    
};

---

尽管我在10个项目的底部得到了一个额外的空白项目。

对这一行进行评论/$scope.newsletters.push（数据）； 它会将整个数据作为另一项添加。

试试看

$scope.posts = $scope.posts.concat(items.posts);

反而

$scope.posts=items.posts;

---

好吧，我设法缩小了问题的范围。现在我得到了数据，但是新的数据替换了旧的数据，函数MyController（$scope，$http）{$scope.posts=[]；$scope.page=1；$scope.loadMore=function（）{$http.get（'{$scope.posts=items.posts；console.log（items.posts）；$scope.broadcast（'scroll.infiniteScrollComplete'）；console.log（$scope.page）；$scope.page+=1；}）；}；我知道$scope.posts=items.posts是错误的，我就是找不到附加它的方法

$scope.posts = $scope.posts.concat(items.posts);

$scope.posts=items.posts;