ngInfiniteScroll nicht funktioniert

Ich versuche zu machen ngInfiniteScroll Arbeit, aber vergeblich - Plunker. Scroll-Ereignis wird nur ausgelöst, auf die Seite laden, nach, dass nichts scheint, um es zu lösen. Kann bitte jemand etwas Licht.

Ich habe versucht, verschiedene Kombinationen, keiner war:

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

}]);

InformationsquelleAutor Shyamal Parikh | 2015-11-30

  1. 8

    EDIT: Sie sind mit der neuesten stabilen version von ngInfinite Blättern, die nicht über den -container-und -Eltern-Methoden, ich habe update der plunker mit der Entwicklung ersetzt ngInfiniteScroll.js jetzt können Sie sehen den funktionierenden code hier:

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

    ALT:

    ngInfiniteScroll rufen myPagingFunction() jedes mal, wenn unten
    das element nähert sich dem unteren Rand des browser-Fensters

    so, wenn Sie Ihre css und entfernen Sie die max-Höhe, so dass die Liste umfasst die Seite,Sie werden sehen, dass die infinitescroll arbeitet, wenn der Benutzer scrollt die Seite.

    #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 unendliche scrollen in einem container

    Ich hatte einige Schwierigkeiten mit diesem Thema, ich wußte nicht einmal, überprüfen Sie die Versionsnummer, Ursache, die ich erhalten habe die js-Dateien aus nuget, so dass ich, vorausgesetzt Sie waren die neueste version, aber Sie waren von 2013. ändern der Datei-Inhalt mit den neuesten code, und ändert, wie in deinem Beispiel wurde das Problem behoben

    InformationsquelleAutor gaurav5430

  2. 4

    Überprüfen Sie Ihre HAUPT-HTML-oder body-tag. Sie könnten mit css overflow. Also die Seite scrollen muss, werden die wrapper in diesem Fall. 

    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'">

    Diesem meinen Tag gerettet.

    InformationsquelleAutor Mahendra

  3. 1

    Können Sie Kasse der 1.3.0 version, die führt eine Prüfung auf "infinite-scroll-Eltern".

    Wenn Sie bower: bower install --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">

    Sie meinen Tag gerettet!

    InformationsquelleAutor tottomotto

Schreibe einen Kommentar