javascript - 带有 ionic 框架的 instagram feed 无限滚动不会在转发器错误中停止重复

Question

我正在尝试使用 Ionic Framework 构建一个 IOS 和 Android 应用程序，该应用程序具有 Instagram Feed 和 instagram api，显示由 hashtag 共享的所有照片(我将使用 hashtag chocolat 有一个例子)我想实现拉动刷新和无限滚动，所以基本上我会有一个按钮，一旦单击它就会打开带有 instagram 提要的 View 并拉出前 10 个结果，拉动刷新会尝试获得更新的结果，然后如果向下滚动提要，它会添加下一组结果(旧结果)。我一直在搜索，但我构建了一些无法按预期工作的东西。我是 ionic、angularjs 和 javascript 的新手开发人员，所以我决定在这里发布我的问题。

这是我的代码:

通过http获取instagram json的工厂或服务:

app.factory('PhotoService', function($http){ 
  var BASE_URL = "https://api.instagram.com/v1/tags/chocolat/media/recent?access_token=+++"; 
  //access_token hidden for privacy reasons
  var items = [];
  var nextUrl = 0;

  return {
    GetFeed: function(){
      return $http.get(BASE_URL+'&count=10').then(function(response){
        items = response.data.data;
        nextUrl = response.data.pagination.next_url;

        return items;

        });
    },
    GetNewPhotos: function(){
      return $http.get(BASE_URL+'&count=2').then(function(response){
        items = response.data.data;

        return items;
      });
    },
    GetOldPhotos: function(){
      return $http.get(nextUrl).then(function(response){

        items = response.data.data;
        return items;
      });
    }
  }
});

Controller :

app.controller('CivrInstagramController', function($scope, $timeout, PhotoService) {
  $scope.items = [];
  $scope.newItems = [];

  PhotoService.GetFeed().then(function(items){
    $scope.items = items;
  });

  $scope.doRefresh = function() {
    if($scope.newItems.length > 0){
      $scope.items = $scope.newItems.concat($scope.items);

     //Stop the ion-refresher from spinning
     $scope.$broadcast('scroll.refreshComplete');

     $scope.newItems = [];
    } else {
      PhotoService.GetNewPhotos().then(function(items){
        $scope.items = items.concat($scope.items);

        //Stop the ion-refresher from spinning
        $scope.$broadcast('scroll.refreshComplete');
      });
    }
  };

  $scope.loadMore = function(){
    PhotoService.GetOldPhotos().then(function(items) {
      $scope.items = $scope.items.concat(items);

      $scope.$broadcast('scroll.infiniteScrollComplete');
    });
  };
});

View :

<ion-view view-title="#Chocolat Photos!">
  <ion-content>
    <ion-refresher on-refresh="doRefresh()"></ion-refresher>
    <div class="list card" ng-repeat="item in items track by item.id">
      <div class="item item-avatar">
        <img ng-src="{{item.user.profile_picture}}" ng-  if="item.user.profile_picture.startsWith('https')">
        <h2>{{item.user.full_name}}</h2>
        <p><span am-time-ago="item.created_time" am-preprocess="unix"></span></p>
      </div>

      <div class="item item-body" >
        <img ng-src="{{item.images.low_resolution.url}}" ng-if="item.images.low_resolution.url.startsWith('https')">
        <p>
          {{item.caption.text}}
        </p>
      </div>

    </div>
    <ion-infinite-scroll on-infinite="loadMore()" distance="5%"></ion-infinite-  scroll>
  </ion-content>
</ion-view>

PhotoService.GetFeed() 运行良好，因为它正确填充了前 10 张照片，但是，当我尝试无限滚动时出现错误:

Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys.

正如您在 View 中看到的那样，我正在使用按 item.id 进行跟踪，因此我认为这意味着我使用 PhotoService.GetOldPhotos() 一次又一次地获得相同的结果。至于 PhotoService.GetNewPhotos() 它在有新数据要显示时工作，但是当没有新数据要获取时它会在转发器中抛出相同的重复错误(#chocolat 没有新帖子)

我做错了什么？谁能给我一些建议？在此先感谢您的时间!这是一个plnkr ++ 链接到我的项目，您可以在其中实际看到它正在尝试工作:\

++您可能需要在浏览器中启用跨源资源共享才能看到 feed 正常工作。

EDIT1:几乎完成!

所以经过几个小时和一些 console.log() 之后 :p 我能够通过标签获取 instagram 提要并使其与 ionic 拉动刷新和 ionic 无限滚动一起工作(我猜是 90%)但我的代码仍然存在问题，因为每次我滚动到最后一组项目时，我都无法停止无限滚动或 loadMore() 并且他们会尝试加载更多数据，因为最后一个 nextUrl 未定义但是instagram-api 接受 &next_max_tag_id=undefined 并再次获取最新结果，这会导致错误，因为 ng-repeat 中不能有重复项，我不想再次显示第一个结果。

我只需要在没有更多结果时停止 loadMore 和无限滚动，或者如果 &next_max_tag_id=undefined，或者如果两个数组中都有重复项(但我认为这不是推荐的性能明智的做法)。所以这是一个plnkr与我的项目，感谢您的时间!

我将标签更改为结果较低的内容，这样您就可以真正看到错误而不会厌倦滚动:p

Answer 1

我们单独解决了这个问题，但我想我也会在这里发布答案。主要变化是

1. 切换到 JSONp 以避免 CORS 限制
2. 使用 Instagram 的 min_tag_id和 max_tag_id格式
3. 更新getOldPhotos()没有next_max_tag_id时自动返回空数组的方法(从技术上讲，它返回一个已经解析为空数组的不同 promise 。)
4. 更改 $scope.loadMore()检查空响应并设置标志以终止 <ion-infinite-scroll>

在这里查看完整的工作副本:http://plnkr.co/edit/LBW0pp?p=preview