Использование бесконечного свитка в угловых и нефритовых

Я использую angularjs бесконечный scroll в своем веб-приложении панели инструментов. У меня есть одна страница, которая содержит несколько бесконечных прокручиваемых виджетов. Поскольку я хочу иметь бесконечный свиток для каждого из них, я решил использовать эту директиву, но как-то он не работает должным образом. Я хочу, чтобы бесконечный свиток работал по отношению к внутренней полосе прокрутки div контента, которая использует идеальное scrollbar вместо основного окна браузера. Я искал в google и нашел несколько потоков, объясняющих две новые переменные, которые можно использовать для изменения поведения по умолчанию: бесконечный-прокрутка-контейнер и бесконечный-прокрутка-родительский. Я пробовал оба, но никто из них не работает для меня. Я думаю, что использование идеальной полосы прокрутки создает проблему.

Код нефрита:

          .hor-col(ng-repeat="stream in socialStreams")
                .box-body(style='min-height: 400px;')
                    perfect-scrollbar.timeline-scroller(wheel-propagation="true" wheel-speed="1" min-scrollbar-length="8" suppressScrollX="true" id="streamScroll-{{$index}}")
                        div(infinite-scroll="loadMorePosts(stream['streamId'], stream['endCursor'])", infinite-scroll-disabled="stream['infiniteScrollDisabled']",  infinite-scroll-container="'#streamScroll-{{$index}}'")

Поскольку существует несколько виджетов, я не могу использовать один и тот же идентификатор или класс для контейнера с бесконечным прокруткой и поэтому решил генерировать динамический идентификатор.

Как я могу вставить динамический класс в контейнер с бесконечным прокруткой?

Я получаю следующую ошибку:

Ошибка: не удалось выполнить 'querySelector' в 'Document': '#streamScroll - {{$ index}}' не является допустимым селектором.

P.S. Я видел следующие темы, но никто из них не выполнил мое требование:

https://github.com/sroze/ngInfiniteScroll/issues/57

бесконечная прокрутка angularjs в контейнере

AngularJS - ng-repeat для назначения/создания нового уникального идентификатора

Ответ 1

Я не уверен, что вам нужны фигурные скобки внутри параметра infin-scroll-container. Вы должны передать в него вычислимую строку, поэтому я предлагаю вам попробовать следующее:

infinite-scroll-container="'#streamScroll-' + $index"

Потому что этот параметр, как и другие, не нуждается в интерполяции с фигурными фигурными скобками, он готов принять выражение.

Ответ 2

Это не фактический ответ на проблему, но стоит попробовать.
Я могу показать вам, как вы можете написать свою собственную директиву с бесконечным прокруткой. Здесь код:

HTML

<div infinite-scroll="loadSomeData()" load-on="scrollToTop">
...    
</div>

Директива:

app.directive('infiniteScroll', function () {
        return {
            restrict: 'A',
            link: function ($scope, element, attrs) {
                var raw = element[0];
                element.bind('scroll', function () {
                    if (attrs.loadOn === 'scrollToTop') {
                        if (raw.scrollTop === 0) {
                            $scope.$apply(attrs.infiniteScroll);
                        }
                    } else {
                        if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
                            $scope.$apply(attrs.infiniteScroll);
                        }
                    }
                });
            }
        };
    }
 );

В контроллере html:

$scope.loadSomeData = function () {
    // Load some data here.
};

Обратите внимание, что load-on="scrollToTop" является необязательным в теге html div. Это выполняется, только если вы хотите выполнить функцию loadSomeData() при прокрутке вверх, иначе она будет выполнять функцию при прокрутке в нижней части div.

Ответ 3

Angular материал имеет довольно полезный бесконечный свиток. Я думаю, вам стоит взглянуть на него Бесконечный прокрутка