ngInfiniteScroll не работает

Я пытаюсь воссоздать простой пример 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);
    }
  };
});

angularjs nginfinitescroll
person George Richardson    schedule 07.07.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Ваш метод выглядит очень сложным. Вот что я написал (и взял из другого вопроса, который я считаю) в директиве, чтобы я верю в то же поведение (при прокрутке вниз она запускает функцию, которая загружает больше того же контента):

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

Я «слушаю» событие прокрутки, а затем каждый раз, когда это происходит, я проверяю, находится ли оно в конце страницы, и если это так, я запускаю свою функцию через атрибут. В этом конкретном случае он срабатывает только тогда, когда прокрутите до самого конца, вы, вероятно, сможете сделать что-то более плавное.

person Mimu    schedule 07.07.2014
comment
Метод копируется и вставляется из ngInfiniteScroll (binarymuse.github.io/ngInfiniteScroll). Я добавил вашу директиву и протестировал ее, но она не работает. jsfiddle.net/uVxb8/7. - person George Richardson; 07.07.2014
comment
Вам нужно изменить содержимое if следующим образом: elem[0].scrollTop + elem[0].offsetHeight >= elem[0].scrollHeight, посмотрите эту скрипку, откуда я взял свое решение: jsfiddle. net / vojtajina / U7Bz9. Я изменил его, чтобы слушать прокрутку браузера вместо прокрутки элемента (как в скрипке). - person Mimu; 07.07.2014