我试图建立一个IOS，并使用具有一个Instagram的饲料与Instagram的API离子框架Android应用程序显示了包括hashtag共享所有照片（我将使用＃标签巧克力有一个例子），我想要实现拉刷新和无限滚动，所以basicaly我想有一个按钮，点击后打开与Instagram的饲料观点，拉着前10个结果，拉刷新会尝试让新的结果，那么，如果将进料向下滚动，将添加下一个结果集（旧的结果）的。 我一直在寻找，我已经建立了按预期不是很努力的东西。 我在离子，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.
我使用的轨道由item.id，你可以在视图中看到的，所以我认为这意味着即时得到相同的结果一遍一遍与PhotoService.GetOldPhotos（）。 作为PhotoService.GetNewPhotos（）它工作时，有新的数据来显示，但它抛出重复的相同的错误中的中继器时，有没有新的数据来获取（与#chocolat无新文章）
我究竟做错了什么？ 任何人都可以给我一些建议吗？ 在此先感谢您的时间！ 这里是一个plnkr ++链接到我的项目中，你可以看到它努力工作：\
++您可能需要启用跨域资源共享在浏览器中看到的饲料工作。
EDIT1：几乎做到了！
一些长时间后，于是经过一番的console.log（）'S：P我能得到通过标签的Instagram的饲料，并使其与离子拉刷新和离子无限滚动（以及90％的我猜的）工作，但我还在原地用我的代码有问题，因为我每次滚动到最后一组项目，我不能停止无限滚动也不loadMore（），他们会尝试加载更多的数据，因为最后nextUrl是不确定的，但Instagram的-API接受＆next_max_tag_id =不确定，再次让我最近的结果，这将导致一个错误，因为有可能是在NG-重复无重复，我不想再次显示第一批结果。
我只需要停止loadMore和无限滚动时，有没有更多的结果，或者如果与next_max_tag_id = undefined或是否有在两个数组复制（但我不认为这是推荐性能明智）。 因此，这里是一个plnkr与我的项目，感谢您的时间！
我改变了标签的东西，低的结果，所以你可以真正看到错误不腻滚动的：P
