Как реализовать бесконечный свиток с запросом HTTP?

Question

В настоящее время я пишу webapp angularjs, где я получаю массив объектов, довольно длинный. Я использую вложенный ng-repeat для отображения объектов в моем индексе. Я использовал бесконечный свиток, как Facebook. Когда вы находитесь в нижней части страницы, он делает запрос HTTP для получения большего количества объектов.

Я пытался использовать эти две библиотеки, но я действительно путает

1: http://lorenzofox3.github.io/lrInfiniteScroll/

2: http://binarymuse.github.io/ngInfiniteScroll/demo_async.html

Это мой вложенные нг-повтор

   <div ng-repeat="monthi in monthedIncidents" ng-hide="showme"> 
<div style="width: 100%;"> 
    <h3>{{monthi.name}}</h3> 
     <div class="line-separator"></div> 
</div> 
<ul class="list"> 
    <li class="list__item" ng-repeat="incident in monthi.incidents"> 
     <!-- ngrepeat: mostrar total de incidentes--> 
     <a href="#" data-toggle="modal" data-target="#incidentModal" ng-click="selectIncident(incident.index)"> 
      <!-- /.badgetSection--> 
      <figure class="list__item__inner"> 
       <div class="bagdets"> 
        <span class="glyphicon glyphicon glyphicon-comment"><span> {{incident._embedded.commentsCount}} </span> 
        <span class="glyphicon glyphicon glyphicon-picture"><span> {{incident._embedded.attachmentsCount}} </span> 
       </div> 
       <!-- ./badges --> 
       <div class="hoverMask"></div> 
       <div class="incident-image"> 
        <img ng-src="{{incident._links.thumbnail.href || 'img/03.jpg'}}"> 
        <p class="incident-type"><span>{{incident._embedded.incident_type}}</span> 
        </p> 
       </div> 
       <figcaption> 
        <p>{{incident.name}}</p> 
        <p>{{incident.id}}</p> 
        <div class="line-separator"></div> 
        <p id="description">{{incident.description | strLimit: 90 }}</p> 
        <div class="line-separator"></div> 
        <p><span class="glyphicon glyphicon-calendar"></span> {{incident.upload_date | date:'EEE - dd/MM/yyyy '}} <span class="glyphicon glyphicon-time"></span> {{incident.upload_date | date:'hh:mm:ss a '}}</p> 
        <div class="line-separator"></div> 
        <p> <span class="glyphicon glyphicon-user"></span> {{incident._embedded.employee}}</p> 
       </figcaption> 
      </figure> 
     </a> 
    </li> 
    <!-- /.list__item --> 
</ul> 
<!-- /.list --> 

, и это мой контроллер:

app.controller("IncidentIndexCtrl", function ($resource, $scope, Incident, Device, IncidentType, $http, $window) { 
/*Obtener todos los incidentes*/ 
$scope.reloadIncidents = function() { 

    Incident.getIncidents({ 

     startdate: $scope.startDateResult, 
     enddate: $scope.endDateResult, 
     description: $scope.descriptionResult, 
     incidentType: $scope.incidentTypeResult, 

    }, function (data) { 
     $scope.incidents = data._embedded.incidents; 


     var monthIncidents = []; 

     for (var i in $scope.incidents) { 
      var month = new Date($scope.incidents[i].upload_date).getMonth(); 

      if (!monthIncidents[month]) { 
       monthIncidents[month] = { 
        name: $scope.months[month], 
        incidents: [] 
       }; 
      } 

      var incident = $scope.incidents[i]; 
      incident.index = i; 

      monthIncidents[month].incidents.push(incident); 
     } 

     $scope.monthedIncidents = []; 

     for (var e in monthIncidents) { 
      $scope.monthedIncidents.push(monthIncidents[e]); 
     } 

    }); 


}; 

$scope.reloadIncidents(); 

$scope.months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; 

StartDate: $ scope.startDateResult EndDate: $ scope.endDateResult Описание: $ scope.descriptionResult incidentType: $ scope.incidentTypeResult

Эти значения используются только для управления этим URL-адресом: http://incidents-core/app_dev.php/incidents?order=ASC&orderBy=id&limit=4

JSON array предоставляет мне URL-адрес для следующего объекта, в зависимости от l Imit

{ 
"offset": 0, 
"limit": 4, 
"_links": { 
    "self": { 
     "href": "http://incidents-core/app_dev.php/incidents?order=ASC&orderBy=id&limit=4&offset=0" 
    }, 
    "first": { 
     "href": "http://incidents-core/app_dev.php/incidents?order=ASC&orderBy=id&limit=4&offset=0" 
    }, 
    "next": { 
     "href": "http://incidents-core/app_dev.php/incidents?order=ASC&orderBy=id&limit=4&offset=4" 
    } 
} 

Answer 1

Попробуйте это:

Вид:

<div infinite-scroll="find()" infinite-scroll-disabled="busy || stopScroll" infinite-scroll-distance="1"><!-- Your content --></div> 

Контроллер:

var count = 5; 
    var page = 1; 
    $scope.busy = false; 
    $scope.stopScroll = false; 


    $scope.find = function() { 
     if ($scope.busy) return; 
     $scope.busy = true; 

     //HERE the Restfull action. With pagination. Pass a callback 
     //... 

     function callback(res){ 
      $scope.total = res.length; 
      if(count*page>=$scope.total) $scope.stopScroll = true; 
      page++; 
      $scope.busy = false; 
     } 

     }); 
    };