Используйте AngularJS $ http.get для повторного запроса массива JSON при прокрутке

Question

Ниже приведен фрагмент, использующий AngularJS для получения ответа JSON.

При прокрутке в нижней части страницы мне нужно запросить многократно, пока список массивов JSON не будет пустым.

<section> 
     <div style="padding-top:60px" infinite-scroll="myPagingFunction()" infinite-scroll-distance="3" ng-app="myApp" ng-controller="myCtrl"> 
      <div ng-repeat="news in newsList"> 

       <div class="col-lg-3 col-md-4 col-sm-6" style=""> 
        <div class="thumbnail"> 
         <img src="{{news.coverUrl}}" class="img-responsive" alt="{{news.name}}"/> 
         <div class="caption"> 
          <h4>{{news.name}}</h4> 
         </div> 
        </div> 
       </div> 
       <div class="visible-lg clearfix" ng-if="($index+1)%4 == 0"></div> 
       <div class="visible-md clearfix" ng-if="($index+1)%3 == 0"></div> 
       <div class="visible-sm clearfix" ng-if="($index+1)%2 == 0"></div> 

      </div> 
     </div> 
    </section> 
    <script src="js/jquery.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
    <script src="js/ng-infinite-scroll.min.js"></script> 


    <script> 
     var offset = 0 
     var maxCount = 20 
     var app = angular.module('myApp', ['infinite-scroll']); 
     function myPagingFunction(){ 

      app.controller('myCtrl', function($scope, $http) { 
       $http.get("news.json").then(function(response) { 
        $scope.newsList = response.data; 
       }); 
      }); 
     } 
     myPagingFunction(); 
    </script> 

    <script src="js/bootstrap.min.js"></script> 

Просьба помочь мне в решении этого вопроса.

Answer 1

Использование JQuery + угловой не хорошо
Вы должны использовать угловой путь вместо этого, и писать некоторые директивы или слушатель в run фазы, но вот лучший подход - использовать `ngInfiniteScroll плагина

Answer 2

Вы можете просто использовать бесконечные службы прокрутки легко достичь этого, модуль прокрутки нг-бесконечна

<ANY infinite-scroll='{expression}' 
[infinite-scroll-distance='{number}'] 
[infinite-scroll-disabled='{boolean}'] 
[infinite-scroll-immediate-check='{boolean}'] 
[infinite-scroll-listen-for-event='{string}']> 

Добавить в приложении для получения дополнительной информации см это [документ] :(https://sroze.github.io/ngInfiniteScroll)

Answer 3

Вы можете использовать эту простую директиву и наслаждайтесь:

app.directive("scroll",['$window', function ($window) { 
return function (scope, element, attrs) { 
    angular.element($window).bind("scroll", function() { 

     if (document.body.scrollHeight - $window.scrollY < 890) { 
      scope.$apply(function() { 

       scope.myPagingFunction(); 
      }); 
     } 

    }); 
}; 
}]); 

и вы можете использовать этот код для вашей ситуации

<section> 
     <div style="padding-top:60px" scroll ng-app="myApp" ng-controller="myCtrl"> 
      <div ng-repeat="news in newsList"> 

       <div class="col-lg-3 col-md-4 col-sm-6" style=""> 
        <div class="thumbnail"> 
         <img src="{{news.coverUrl}}" class="img-responsive" alt="{{news.name}}"/> 
         <div class="caption"> 
          <h4>{{news.name}}</h4> 
         </div> 
        </div> 
       </div> 
       <div class="visible-lg clearfix" ng-if="($index+1)%4 == 0"></div> 
       <div class="visible-md clearfix" ng-if="($index+1)%3 == 0"></div> 
       <div class="visible-sm clearfix" ng-if="($index+1)%2 == 0"></div> 

      </div> 
     </div> 
    </section> 
    <script src="js/jquery.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
    <script src="js/ng-infinite-scroll.min.js"></script> 


    <script> 
     var offset = 0 
     var maxCount = 20 
     var app = angular.module('myApp', ['infinite-scroll']); 
     app.controller('myCtrl', function ($scope, $http) { 
    $scope.myPagingFunction= function() { 
     $http.get("news.json").then(function (response) { 
      $scope.newsList = response.data; 
     }); 
    } 
      }); 
    app.directive("scroll",['$window', function ($window) { 
    return function (scope, element, attrs) { 
angular.element($window).bind("scroll", function() { 

    if (document.body.scrollHeight - $window.scrollY < 890) { 
     scope.$apply(function() { 

      scope.myPagingFunction(); 
      }); 
     } 

    }); 
}; 
}]); 
    </script> 

    <script src="js/bootstrap.min.js"></script>