2016-05-13 6 views
0

Ich versuche den nginfiniteScroll von https://github.com/sroze/ngInfiniteScroll/tree/1.0.0 zu verwenden. Ich bin in der Lage, alles zu lesen, aber ich habe einige Probleme beim Auslösen der Rolle. Wenn ich einen Container für das Bildlauffeld erstellen, funktioniert das unendliche Bildlauf ordnungsgemäß. Aber wenn ich es aus einem Container entferne und nur einen Körper benutze, kann ich nicht scrollen. Ich habe einen Plunkr meines Codes erstellt, aber im Plunkr scheint es völlig in Ordnung zu sein, was mich wirklich verwirrt.ngInfiniteScroll Scroll nicht triggern

In meinem eigenen Code habe ich so etwas wie so

<style>#list-wrapper{ 
max-height: 400px; 
overflow-y: scroll; 

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

h4{ 
padding: 20px; 
}</style> 

<div class="panel-content" data-ng-controller="DashboardCtrl"> 

<div> 
    <div class="list" infinite-scroll='loadMore()' 
     infinite-scroll-distance='2'> 
     <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> 

<h4>{{scrollTriggered}}</h4> 
</div> 

und meinen Skript

.controller("DashboardCtrl", ["$scope", 
function ($scope) { 

$scope.infiniteList = []; 
$scope.incr = 1; 

$scope.scrollTriggered = ""; 

$scope.loadMore = function() { 

    $scope.scrollTriggered += "\n Scroll Triggered" 
    for (var i = 0; i < 30; i++) { 
     $scope.infiniteList.push("Item " + $scope.incr); 
     $scope.incr += 1; 
    } 
}; 
} 
]) 

, die als so enter image description here suchen enden und die Scroll-Funktion nicht auslösen, die in meinem plunkr gezeigt . Das war also anscheinend eine seltsame Antwort, da es wirklich nicht mir in den Sinn

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

Jede Hilfe wäre sehr

+0

überprüfen Sie Code, der Fehler haben kann, um Daten abzurufen und in Array –

+0

hinzufügen Ich habe meine Frage mit dem entsprechenden Skript aktualisiert. Wie Sie sehen können, ist es das gleiche Skript wie die Plunkr für Testzwecke. Die Plunkr funktioniert nicht, wie es aussieht. –

+0

add $ scope.apply() Ende Ihres Codes –

Antwort

1

geschätzt. Weil ich ein Google-Karten haben, die ganze Seite ist, habe ich die Html-Tag, das

war
.html{ 
height 100%; 
} 

Dieses einige Fehler verursacht, wie es die Scroll überhaupt auslösen würde. Deshalb konnte ich überhaupt nicht blättern. Das Entfernen der Höhenbeschränkung ermöglichte das Scrollen.