我正在尝试编写一个类似于此处找到的小型无限滚动:http://jsfiddle.net/vojtajina/U7Bz9/
我已经能够显示前5个数据,但是在滚动时,进一步的项目没有被显示。
HTML:
这是一个 plunker: http://plnkr.co/edit/6ggYGZx6scSoJ5PNhj67?p=preview
HTML:
<div id="fixed" directive-when-scrolled="loadMore()">
<ul>
<li ng-repeat="i in items | limitTo: 5">{{ i.Title }}</li>
</ul>
</div>
JS:
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.items = [
{
"Title":"Home"
},
{
"Title":"Contact"
},
{
"Title":"Help"
},
{
"Title":"About"
},
{
"Title":"Our Offices"
},
{
"Title":"Our Locations"
},
{
"Title":"Meet the Team"
}
,
{
"Title":"Our Mission"
},
{
"Title":"Join Us"
},
{
"Title":"Conferences"
},
{
"Title":"Tables"
},
{
"Title":"Chairs"
}
];
var counter = 0;
$scope.loadMore = function() {
for (var i = 0; i < 5; i++) {
$scope.items.push({id: counter});
counter += 10;
}
};
$scope.loadMore();
});
app.directive("directiveWhenScrolled", function () {
return function(scope, elm, attr) {
var raw = elm[0];
elm.bind('app', function() {
if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
scope.$apply(attr.whenScrolled);
}
});
};
});
这是一个 plunker: http://plnkr.co/edit/6ggYGZx6scSoJ5PNhj67?p=preview