在使用angular開發移動端頁面的童鞋們，有時要做到上拉載入，雖然jquery有很多外掛可以滿足這個效果，但是我們要知道使用angualr專案就儘量不要再使用jquery，因此ng的infinite-scroll上拉載入就很有作用了，但是使用的小夥伴遇到無限請求怎麼辦呢？

最近我也遇到了這個問題，解決方案如下：

我們通過infinite-scroll的自帶屬性infinite-scroll-disabled就可以解決

1、html頁面中加入infinite-scroll-disabled屬性

<div  infinite-scroll-disabled
 
="ifReq" infinite-scroll='indexLoadMore()' infinite-scroll-distance='0'>
//infinite-scroll-disabled 表示是否禁用infinite-scroll，true表示禁用，false表示不禁用
//infinite-scroll 表示資料請求的方法
//infinite-scroll-distance 表示觸發請求滾動條距離頁面底部的距離

2、angularjs處理中加入

$scope.indexLoadMore = function(reqUrl,method,page,totalPage) {//分頁載入資料方法
 

        indexDataLoadFun(reqUrl,method,totalPage);//資料載入方法
    };

    var indexDataLoadFun = function(reqUrl,method,totalPage){//首頁載入方法獨立出來，進行資料的分頁載入
        //分頁總數

        if(totalPage > currentPage){//開始請求後臺資料
            if ($scope.ifReq) return;//判斷當前資料是否請求完成
                $scope.ifReq = true;
                currentPage = currentPage +1
 
;//分頁頁碼數+1
                $http({
                    method:method ,
                    data:{
                        "pageNumber": currentPage
                    },
                    url:reqUrl
                }).then(function successCallback(response) {                        
                   //請求成功，開始操作資料
                   $scope.ifReq = false;
                }, function errorCallback(response) {
                    // 請求失敗執行程式碼
                    $scope.ifReq = false;
                    currentPage = currentPage - 1;
                    $scope.loadingTitle = "出錯啦，請稍後重試~";
                });
            }
        else{
        console.log("沒有資料了")
        }

    };

3、原理如下

通過控制ifReq的布林值，來決定是否禁用infinite-scroll，這樣就可以實現每次分頁的時候在上一次請求完成之後才會發起下一次的請求。