在AngularJS和Jade中使用无限滚动

Question

我正在我的仪表板 Web 应用程序中使用 angularjs infinite 滚动。我有一个页面包含多个无限滚动小部件。由于我想为每个小部件都拥有无限滚动，所以我决定使用这个指令，但不知何故它的工作效果并不如预期。我希望无限滚动相对于内部内容 div 滚动条进行工作，该滚动条使用 perfect scrollbar 而不是主浏览器窗口。我在谷歌上搜索并找到了多个线程，解释了可以使用的两个新变量来更改默认行为： infinite-scroll-container 和 infinite-scroll-parent。我尝试了两者，但它们都没有为我工作。我认为 perfect-scrollbar 的使用正在创建问题。

Jade 代码：

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

由于有多个小部件，我不能为infinite-scroll-container使用相同的id或类，因此决定生成动态id。

如何在infinite-scroll-container内注入动态类？

我收到以下错误：

错误：未能执行“Document”的'querySelector'： '#streamScroll-{{$index}}'不是一个有效的选择器。

P.S. 我看过以下线程，但没有一个涵盖了我的要求：

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

angularjs infinite scroll in a container

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

- dark_shadow

Answer 1

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

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

因为像其他参数一样，这个参数不需要用花括号进行内插，它已经可以接受表达式了。

- punov

---

太棒了！非常高兴能够帮助到你。 - punov

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底部时执行该函数。

- Marin Takanov

Answer 3

Angular Material有一个非常实用的无限滚动功能。我认为你应该看一下无限滚动。

- salih baki sayer