在 angularjs 和 jade 中使用 Infinite scroll

Question

我正在使用 angularjs infinite scroll in my dashboard web app. I have a single page which holds multiple infinite scrollable widgets. Since I want to have an infinite scroll for each of them I decided to use this directive but somehow it's not working as expected. I want the infinite scroll to work relative to the inner content div scrollbar which uses perfect scrollbar 而不是主浏览器 window。我在 google 上进行了搜索，发现多个线程解释了 2 个可用于更改默认行为的新变量：infinite-scroll-container 和 infinite-滚动父。我都试过了，但其中 none 对我有用。我认为使用 perfect-scrollbar 会造成问题。

翡翠代码：

          .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}}'")

由于有多个小部件，我不能对无限滚动容器使用相同的 ID 或 class，因此决定生成动态 ID。

如何在 infinite-scroll-container 中注入动态 class？

我收到以下错误：

Error: Failed to execute 'querySelector' on 'Document': '#streamScroll-{{$index}}' is not a valid selector.

P.S。我看到了以下主题，但其中 none 满足了我的要求：

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

angularjs infinite scroll in a container

AngularJS - ng-repeat to assign/generate a new unique ID

Answer 1

我不确定您是否需要在 infinite-scroll-container 参数中使用大括号。你应该在其中传递可计算的字符串，所以我建议你这样尝试：

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

因为这个参数和其他参数一样，不需要用花括号进行插值，它已经准备好接受表达式了。

Answer 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.

底部时执行该函数

Answer 3

Angular material 有非常有用的无限滚动。我觉得你应该看一看 Infinite Scroll

在 angularjs 和 jade 中使用 Infinite scroll

Using Infinite scroll in angularjs and jade

javascript

jquery

angularjs

pug

nginfinitescroll