angular下拉到底部发送请求获取分页数据

angular下拉到底部发送请求获取分页数据
项⽬中⽤到⼀个下拉多选框，框内数据从后台获取，由于数据较多，导致接⼝反应时间较长且渲染速度较慢，所以采⽤分页请求数据形式，下拉到底部时进⾏分页请求，下⾯贴代码（由于采⽤按需加载js，所以没有controller）：
先定义⼀个directive：
angular.module('app.directive').directive('pullRefresh', [function() {
return {
restrict: 'AE',
link: function(scope, ele, attr) {
ele.on('scroll', function() {
var scrollTop = ele[0].scrollTop;
//滚动条的⾼度
var scrollHeight = ele[0].scrollHeight;
//窗⼝的⾼度
var offsetHeight = ele[0].offsetHeight;
//内容可视区域的⾼度
if (scrollTop + offsetHeight >= scrollHeight) {
scope.$apply(attr.pullRefresh);
}
})
}
}
}])
页⾯上引⽤（这⾥⽤到bootstrap的dropdown）：
<div class="dropdown">
<p ng-click="offerClick()" class="dropdown-toggle" data-toggle="dropdown">{{已选择内容}}</p>
<ul class="dropdown-menu" role="menu" scrolled="loadMore()">//这⾥的样式应有max-height：固定值；overflow-y：auto； <li ng-repeat="vo in items" self-stop-propagation>
// self-stop-propagation 因为是下拉复选框，所以此处⽤于防⽌冒泡
<i class="fa fa-check-square" ng-class="{true:'active'}[vo.isSelect]"></i>{{}}
</li>
<li ng-show="busy">
<i class="">此处可⽤于显⽰加载动画</i>
</li>
</ul>
</div>
js：
$scope.currentPage = 0;
$scope.totalPages = 1;
$scope.busy = false;
$scope.firstReq = true;
$scope.offerClick = function(detailNET,dom){
if ($scope.firstReq) {
$scope.loadMore();//仅第⼀次点击时请求第⼀页数据
}
};
$scope.loadMore = function() {
if ($scope.currentPage < $scope.totalPages) {
$scope.currentPage++;
if ($scope.busy) {
return false;
}
$scope.busy = true;
// 请求后台服务器(API内容就不放了)
operationAPI.allList($scope.currentPage).then(function(result){
if (result.status == 0) { //数据正常返回时执⾏
$scope.busy = false;//防⽌重复请求
$scope.firstReq = false;//防⽌offerClick 的请求
$scope.itemScroll = result.offers；
$scope.items= $scope.items.concat($scope.itemScroll);//将请求页内的数据拼接到总数据中
$scope.totalPages = result.totalPages;
}
})
}
};
请求的具体逻辑如下：
默认下拉框不显⽰，点击p标签时显⽰下拉框并请求接⼝将第⼀页的返回值渲染到下拉框中（此处渲染会有延时，因为接⼝返回值需要时间，且仅在第⼀次点击时请求接⼝，之后的点击仅显⽰/隐藏下拉框）；
滚动条到下拉框底部时请求第⼆页，渲染完成前显⽰loading动画，完成后隐藏；
继续下拉到底部继续请求，直到请求页数等于总页数不再请求。