帶有離子框架無限滾動的instagram feed不會阻止重復器錯誤中的重復項

Question

我正在嘗試使用Ionic Framework構建IOS和android應用程序，該應用程序具有帶有instagram api的Instagram Feed，該feed顯示所有由hashtag共享的照片（我將使用hashtag chocolat給出一個示例），並且我想實現pull刷新和無限滾動，所以基本上我會有一個按鈕，一旦單擊該按鈕，就會打開instagram feed的視圖並拉出前10個結果，拉動刷新將嘗試獲得更新的結果，然后，如果feed向下滾動，它將添加下一個結果集（舊結果）。 我一直在搜索，並且已經構建了無法正常工作的產品。 我是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;
      });
    }
  }
});

控制器：

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

風景：

<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.

我正在使用在項目視圖中看到的by item.id跟蹤，所以我認為這意味着Im通過PhotoService.GetOldPhotos（）一遍又一遍地獲得相同的結果。 至於PhotoService.GetNewPhotos（），它在有新數據要顯示時起作用，但是在沒有新數據要提取時（在#chocolat中沒有新帖子），它會在轉發器中引發相同的重復錯誤。

我究竟做錯了什么？ 誰能給我一些建議？ 在此先感謝您的時間！ 這是指向我的項目的plnkr ++鏈接，您可以在其中實際看到它正在工作：\\

++，您可能需要在瀏覽器中啟用跨域資源共享才能看到提要。

編輯1：幾乎完成了！

因此，經過很長時間之后，經過了console.log（）的：p之后，我能夠通過標簽獲取instagram feed，並使其與離子拉動一起刷新和離子無限滾動（我猜是90％），但是我我的代碼仍然存在問題，因為每次我滾動到最后一組項目時，我都無法停止無限滾動或loadMore（），它們將嘗試加載更多數據，因為最后一個nextUrl是未定義的，但是instagram-api接受＆next_max_tag_id = undefined並再次獲取我最近的結果，這將導致錯誤，因為ng-repeat中沒有重復項，並且我不想再次顯示第一個結果。

當沒有更多結果時，或者＆next_max_tag_id = undefined，或者兩個數組中都有重復項時，我只需要停止loadMore和infinite滾動即可（但是我不建議您在性能方面考慮）。 所以這是我的項目的項目，謝謝您的寶貴時間！

我將標簽更改為結果較差的內容，因此您實際上可以看到錯誤，而不必厭倦滾動：p

Answer 1

我們單獨解決了這個問題，但我想我也將答案發布在這里。 主要變化是

1. 切換到JSONp以避免CORS限制
2. 使用instagram的min_tag_id和max_tag_id格式
3. 更新getOldPhotos()方法以在沒有next_max_tag_id時自動返回一個空數組（從技術上講，它返回一個已經解析為空數組的承諾）。
4. 更改$scope.loadMore()以檢查是否為空，並設置一個標志來殺死<ion-infinite-scroll>

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