3

我正在尝试重新创建他们演示页面上提供的 ngInfiniteScroll 的简单示例。loadMore() 函数永远不会触发，我不知道为什么。

这是代码：http: //jsfiddle.net/uVxb8/3/。

<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);
    }
  };
});
4

1 回答 1

1

你的方法看起来很复杂。这是我在指令中写的（并从另一个问题中提取）在指令中，我相信完全相同的行为（向下滚动时，它会触发一个加载更多相同内容的函数）：

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);
                    }
                });
            }
    }
}]);

我“监听”滚动事件，然后每次发生时我检查它是否在页面末尾，如果是，我通过属性触发我的函数。在这种特定情况下，它仅在您滚动到最后时触发它，您可能可以做一些更流畅的事情。

于 2014-07-07T15:26:17.310 回答