項目中用到一個下拉多選框，框內數據從后台獲取，由於數據較多，導致接口反應時間較長且渲染速度較慢，所以采用分頁請求數據形式，下拉到底部時進行分頁請求，下面貼代碼（由於采用按需加載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>{{vo.name}}
</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動畫，完成后隱藏；
繼續下拉到底部繼續請求，直到請求頁數等於總頁數不再請求。