我试图使ngInfiniteScroll工作但是徒劳 –
Plunker.滚动事件仅在页面加载时触发,之后似乎没有任何东西触发它.任何人都可以请一些亮点.
我尝试了各种组合,没有工作：
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;
}
};
}]);
解决方法
编辑：您正在使用最新稳定版本的ngInfinite Scroll,它没有-container和-parent方法,我已经使用开发的ngInfiniteScroll.js更新了plunker,现在您可以在这里看到工作代码：
http://plnkr.co/edit/Bs9RYXhSAPhmQG5M6pyg?p=preview
旧：
ngInfiniteScroll will call myPagingFunction() any time the bottom of
the element approaches the bottom of the browser window
因此,如果您更改了css并删除了最大高度,以便列表覆盖页面,您将看到当用户滚动浏览页面时infinitescroll正在工作.
#list-wrapper{
//max-height: 400px;
overflow-y: scroll;
margin-top: 20px;
border: solid 1px black;
}
