ngInfiniteScroll funktioniert nicht

Ich versuche, ngInfiniteScroll arbeiten, aber vergeblich - Plunker. Das Scroll-Ereignis wird nur beim Laden der Seite ausgelöst, danach scheint es nichts auszulösen. Kann mir bitte jemand etwas Licht geben.ngInfiniteScroll funktioniert nicht

ich verschiedene Kombinationen ausprobiert, keine gearbeitet:

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; 
     } 
    }; 

}]);

Quelle

2015-11-30 Shyamal Parikh

EDIT: Sie die neueste stabile Version verwenden von ngInfinite Sc Rolle, die nicht die -container und -parent Methoden hat, ich die Plunker mit dem develpoment ngInfiniteScroll.js aktualisieren, jetzt können Sie den Arbeitscode hier sehen:

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

OLD:

ngInfiniteScroll rufen myPagingFunction() jedes Mal, wenn der Boden des das Element mit dem unteren Rand des Browserfensters

so annähert, wenn Sie Ihre CSS und remov ändern Wenn Sie die maximale Höhe verwenden, sodass die Liste die Seite abdeckt, sehen Sie, dass der Infinitescroll funktioniert, wenn der Benutzer an der Seite vorbeiscrollt.

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

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

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

siehe auch: angularjs infinite scroll in a container

Quelle

2015-11-30 18:56:23 gaurav5430

ich mit diesem Thema ein paar Probleme hatte, habe ich überprüfen Sie die Versionsnummer nicht einmal weil ich die js-dateien von nuget bekommen habe, also vermute ich, dass sie die neueste version waren, aber sie waren ab 2013. ändere den dateiinhalt mit dem neuesten code und ändere wie in deinem beispiel das behobene – bokkie

Überprüfen Sie Ihre MAIN HTML oder Body-Tag. Sie könnten einen Überlauf CSS enthalten. Daher muss der Seitenroller in diesem Fall der Wrapper sein.

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

und

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

Das sparte mein Tag.

Quelle

2016-08-12 23:00:05 Mahendra

Sie können die Version 1.3.0 auschecken, die eine Prüfung auf "infinite-scroll-parent" durchführt.

Wenn Sie mit Bower: Bower installieren --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">

Quelle

2016-10-11 12:49:47 tottomotto

du hast meinen tag gerettet! – walox

Antwort

Verwandte Themen