【发布时间】：2015-09-18 21:33:22
【问题描述】：
我正在尝试使用 Ionic 框架构建一个 IOS 和 android 应用程序，该应用程序具有 Instagram 提要和 instagram api，显示主题标签共享的所有照片（我将使用主题标签 chocolat 有一个示例），我想实现拉刷新和无限滚动，所以基本上我会有一个按钮，一旦点击打开一个带有 instagram 提要的视图并拉出前 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;
});
}
}
});
控制器：
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() 的操作后：p 我能够通过标签获得 instagram 提要，并使其与离子拉动刷新和离子无限滚动一起工作（我猜是 90%）但是我的代码仍然存在问题，因为每次滚动到最后一组项目时，我都无法停止无限滚动或 loadMore() 并且他们会尝试加载更多数据，因为最后一个 nextUrl 未定义但是instagram-api 接受 &next_max_tag_id=undefined 并再次获取最新结果，这会导致错误，因为 ng-repeat 中不能有重复项，我不想再次显示第一个结果。
我只需要在没有更多结果时停止 loadMore 和无限滚动，或者如果 &next_max_tag_id=undefined，或者如果两个数组中有重复项（但我认为这不是推荐的性能）。所以这是我的项目的plnkr，谢谢你的时间！
我将标签更改为结果较低的标签，这样您就可以在不厌倦滚动的情况下实际看到错误：p
【问题讨论】：
-
尝试按 $index 跟踪，而不是按 item.id 跟踪
-
@JessPatton 非常感谢您花时间查看我的超长问题，我试过了，它没有检索到任何错误，这太棒了！但是我仍然有一个问题：第一次无限刷新工作正常，但它只是再次循环，我认为这是因为我需要的 nextUrl 是在 GetFeed() 中创建的，当我无限滚动时不会运行，因为 GetOldPhotos 被分配给那个职责，无论如何我可以在 getOldPhotos 上获取 nextUrl 吗？
-
是的，所以我看到你使用 .then()，如果你需要先运行 getFeed，为什么不无限运行 getFeed().then(GetOldPhotos).then（做剩下的事情）。我不确切知道如何解决它，但这是我会尝试的
标签： javascript jquery angularjs ionic-framework ionic