ngInfiniteScroll non funziona

Sto cercando di fare funzionare ngInfiniteScroll ma invano - Plunker. L'evento di scorrimento viene attivato solo al caricamento della pagina, dopo di che nulla sembra attivarlo. Qualcuno può per favore versare un po 'di luce.ngInfiniteScroll non funziona

ho provato varie combinazioni, nessuno ha lavorato:

infinite-scroll='loadMore()' infinite-scroll-distance='2' infinite-scroll-container="'#list-wrapper'" 

infinite-scroll='loadMore()' infinite-scroll-distance='2' infinite-scroll-parent 

infinite-scroll='loadMore()' infinite-scroll-distance='2'

HTML:

<body ng-app="app" ng-controller="listController"> 
     <div id="list-wrapper"> 
      <div class="list" infinite-scroll='loadMore()' 
     infinite-scroll-distance='2' 
     infinite-scroll-container="'#list-wrapper'"> 
      <div class="header"> 

      </div> 

      <div class="list-table" > 
       <table class="table"> 
        <tbody> 
         <tr ng-repeat="item in infiniteList"> 
          <td style="width:100%"> 
           <div>{{item}}</div> 
          </td> 
         </tr> 
        </tbody> 
       </table> 
      </div> 
      <div style='clear: both;'></div> 
      </div> 
     </div>

JS:

var app = angular.module("app", ['infinite-scroll']); 

app.controller('listController', ['$scope','$http', function ($scope,$http) { 
    $scope.infiniteList = []; 
    $scope.incr = 1; 

    $scope.loadMore = function(){ 
     console.log("scroll"); 
     for(var i = 0; i< 30; i++){ 
      $scope.infiniteList.push("Item " + $scope.incr); 
      $scope.incr +=1; 
     } 
    }; 

}]);

fonte

2015-11-30 Shyamal Parikh

EDIT: si sta utilizzando l'ultima versione stabile di ngInfinite Sc rotolo, che non ha i metodi -container e -parent, ho aggiornare la plunker con i ngInfiniteScroll.js develpoment, ora si può vedere il codice di lavoro qui:

http://plnkr.co/edit/Bs9RYXhSAPhmQG5M6pyg?p=preview

VECCHIO:

ngInfiniteScroll chiamerà myPagingFunction() ogni volta che il fondo del dell'elemento si avvicina alla parte inferiore della finestra del browser

così, se si cambia il CSS e Remov e l'altezza massima, in modo che l'elenco copra la pagina, vedrai che l'infinitescroll funziona quando l'utente scorre oltre la pagina.

#list-wrapper{ 
    //max-height: 400px; 
    overflow-y: scroll; 

    margin-top: 20px; 
    border: solid 1px black; 
}

http://plnkr.co/edit/aaUWnnKoH9kXGFx70U2J?p=preview

vedi anche: angularjs infinite scroll in a container

fonte

2015-11-30 18:56:23 gaurav5430

ho avuto qualche problema con questo problema, non ho nemmeno controllare il numero di versione , perché ho ottenuto i file js da nuget, quindi supponevo che fossero l'ultima versione, ma erano del 2013. cambiando il contenuto del file con il codice più recente, e cambiando come nel tuo esempio risolto il problema – bokkie

Controlla la tua tag HTML o corpo principale. Potrebbero contenere alcuni css di overflow. Quindi lo scroll della pagina deve essere il wrapper in quel caso.

body { 
height: 100%; 
overflow-y: auto; 
overflow-x: hidden; 
}

<div infinite-scroll='getMoreListingData()' infinite-scroll-disabled='isbusy' 
    infinite-scroll-distance='0' 
    infinite-scroll-container="'body'">

Questo mi ha salvato la giornata.

fonte

2016-08-12 23:00:05 Mahendra

È possibile eseguire il checkout della versione 1.3.0, che esegue un controllo per "genitore a scorrimento infinito".

Se si utilizza pergolato: scrigno di installare --save ngInfiniteScroll # 1.3.0

<div class="scroll-container"> <!-- Fixed height is OK --> 
    <div infinite-scroll="vm.notifications.loadMore()" infinite-scroll-distance='1' infinite-scroll-immediate-check='true' infinite-scroll-parent="true">

fonte

2016-10-11 12:49:47 tottomotto

hai salvato la mia giornata! – walox

risposta

Problemi correlati