Angularjs ngInfiniteScroll不工作
我正在尝试重新创建演示页面上提供的ngInfiniteScroll的一个简单示例。loadMore()函数从不触发,我也不知道为什么 以下是代码:Angularjs ngInfiniteScroll不工作,angularjs,nginfinitescroll,Angularjs,Nginfinitescroll,我正在尝试重新创建演示页面上提供的ngInfiniteScroll的一个简单示例。loadMore()函数从不触发,我也不知道为什么 以下是代码: var myApp=angular.module('myApp',['infinite-scroll']); myApp.controller('DemoController',函数($scope){ $scope.images=[1,2,3,4,5,6,7,8]; $scope.loadMore=函数(){ var last=$scope.ima
var myApp=angular.module('myApp',['infinite-scroll']);
myApp.controller('DemoController',函数($scope){
$scope.images=[1,2,3,4,5,6,7,8];
$scope.loadMore=函数(){
var last=$scope.images[$scope.images.length-1];
对于(var i=1;i您的方法看起来非常复杂。以下是我在指令中写的(以及从我相信的另一个问题中提取的),我相信完全相同的行为(向下滚动时,它会触发加载更多相同内容的函数):
我“侦听”scroll事件,然后每次它发生时,我都会检查它是否在页面的末尾,如果是,我会通过属性触发我的函数。在这种特定情况下,它只在滚动到最末尾时触发,您可能可以做一些更平滑的事情。该方法是从ngInfiniteScroll()复制和粘贴的。我添加了您的指令并对其进行了测试,但它不起作用。。您需要使用以下命令更改if中的内容:elem[0]。scrollTop+elem[0]。offsetHeight>=elem[0]。scrollHeight
,请查看我获取解决方案的地方的此小提琴:。我将其更改为侦听浏览器滚动而不是元素滚动(如在小提琴中)。
<div ng-app='myApp' ng-controller='DemoController'>
<div infinite-scroll='loadMore()' infinite-scroll-distance='2'>
<img ng-repeat='image in images' ng-src='http://placehold.it/225x250&text={{image}}'>
</div>
</div>
var myApp = angular.module('myApp', ['infinite-scroll']);
myApp.controller('DemoController', function($scope) {
$scope.images = [1, 2, 3, 4, 5, 6, 7, 8];
$scope.loadMore = function() {
var last = $scope.images[$scope.images.length - 1];
for(var i = 1; i <= 8; i++) {
$scope.images.push(last + i);
}
};
});
RandomName.directive('isScrolled', ['$window', '$document', function($window, $document) {
return {
link: function($scope, elem, attr) {
var $myWindow = angular.element($window);
var $myDoc = angular.element($document);
$myWindow.bind('scroll', function() {
if ($myWindow.height() + $myWindow.scrollTop() >= $myDoc.height()) {
$scope.$apply(attr.isScrolled);
}
});
}
}
}]);