カスタム無限スクロールトリガー

Question

jqueryで動作するのに新しい角度が使用されました。

ユーザーがドキュメントのほぼ一番下にいるときにhttp.get要求をトリガーするようにスクロールをリッスンするディレクティブを設定しました。すべてうまく動作しますが、私はイベントがすぐに多くの時間を引き起こすのを避けることはできません。

ここにいくつかのコードがあります。

HTML：

div(class="home-flex", ng-scroll, infinite-request="addMore()", ng-disabled) 
    div(class="home-article", ng-repeat="article in articles", ng-cloak) 
     img(class="home-article-image", ng-src="{{ article.imageUrl }}", ng-cloak) 

ディレクティブ：

nemi.directive('ngScroll', function($window, $document){ 
    return { 
     link: function(scope, element, attrs){ 
      $document.on('scroll', function(element){ 
       var height = Math.max(
        document.body.scrollHeight, document.documentElement.scrollHeight, 
        document.body.offsetHeight, document.documentElement.offsetHeight, 
        document.body.clientHeight, document.documentElement.clientHeight 
       ); 
       // console.log("window height : " + $window.innerHeight) 
       // console.log("scroll from top : " + $window.pageYOffset); 
       // console.log("scroll from top + window height : " + ($window.innerHeight + $window.pageYOffset)) 
       // console.log("doc height : " + height); 
       // console.log("scroll/doc : " + $window.pageYOffset/height); 

       if ((($window.pageYOffset + $window.innerHeight)/height) > 0.6) { 
        console.log("trigger"); 
        scope.$apply(attrs.infiniteRequest); 
       } 

      }) 
     } 
    } 
}) 

がannnnd私のコントローラ：

nemi.controller('homeController', [ '$scope', '$http', '$window', function($scope, $http){ 
    $http.get('/articles').success(function(res){ 
     $scope.articles = res; 
    }).error(function(data){ 
     console.log(data); 
    }); 

    var wait = true; 
    $scope.addMore = function() { 
     if (wait === true) { 
      wait = false; 
      console.log("trigger"); 
      $http.get('/articles').success(function(res) { 
       res.forEach(function(elem){ 
        $scope.articles.push(elem); 

       }) 
      wait = true; 
      }).error(function(){ 
       console.log("scroll failed"); 
      }) 
     } 
    } 
}]); 

私の "ブール待つ" との機能をブロックするために、私の悲惨なattempteはなく、[保存]をdoesntの作品一度に多くの要求から私を救ってください。

私はNG-を無効にして別のものを試してみましたが、何も今のところ私のために働いていない

あなたは、そのプロセスですでに要求を行うかどうかチェックしますか addMore &から起こっている $httpによって返された約束から助けを得ることができ

Answer 1

。いいえの場合は、もう一度電話をかけます。この方法では、1つの呼び出しが完了しない限り、他の呼び出しは発生しません。

コントローラ

nemi.controller('homeController', ['$scope', '$http', '$window', function($scope, $http, $window) { 
    $http.get('/articles').success(function(res) { 
    $scope.articles = res; 
    }).error(function(data) { 
    console.log(data); 
    }); 

    var addMorePromise = null; 
    $scope.addMore = function() { 
    console.log("trigger"); 
    if (!addMorePromise) { //if no request is in progress then do it again 
     addMorePromise = $http.get('/articles').then(function(response) { 
     var data = response.data; 
     data.forEach(function(elem) { 
      $scope.articles.push(elem); 
     }); 
     }).finally(function() { 
     addMorePromise = null; //after request complete, make promise object to null 
     }); 
    } 
    } 
}]);