我试图写一个类似的小无限滚动到这里找到的：
http://jsfiddle.net/vojtajina/U7Bz9/
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);
}
});
};
});
解决方法
有两个问题.首先,什么是attr.whenScrolled？它未定义.第二个 – 限制：5.你总是只显示5个元素！
这里有工作代码：http://plnkr.co/edit/VszvMnWCGb662azo4wAv?p=preview
改变了什么？您的指令名为directiveWhenScrolled,因此调用：
scope.$apply(attr.directiveWhenScrolled);
代替
scope.$apply(attr.whenScrolled);
如何处理静态限制.将其更改为变量(记住定义默认值)：
<li ng-repeat="i in items | limitTo: limit">{{ i.Title }}</li>
现在你的loadMore函数应该如下所示：
$scope.loadMore = function() {
$scope.limit += 5;
};
