Javascript 在angularjs和jade中使用无限卷轴

我在我的仪表板web应用程序中使用angularjs infinite。我有一个页面，其中包含多个无限可滚动的小部件。因为我想为它们中的每一个都有一个无限长的卷轴，所以我决定使用指令，但不知怎么的，它并没有按预期工作。我希望无限滚动相对于使用perfect而不是主浏览器窗口的内部content div滚动条工作。我在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}}'")

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

如何在无限滚动容器中注入动态类

我发现以下错误：

错误：未能对“文档”执行“querySelector”： “#streamScroll-{{$index}}”不是有效的选择器

另外，我见过以下线程，但没有一个满足我的要求：

---

我不确定在无限滚动容器参数中是否需要大括号。您应该在其中传递可计算字符串，因此我建议您这样尝试：

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

---

因为与其他参数一样，此参数不需要使用大括号插值，它可以接受表达式。

这不是问题的实际答案，但值得尝试。
我可以向您展示如何编写自己的无限滚动指令。代码如下：

HTML

在html的控制器中：

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

---

请注意，在html div标记中，

load on=“scrollToTop”

是可选的。这仅当您要在滚动到顶部时执行

loadSomeData（）

函数时，否则它将在滚动到分区底部时执行该函数。

Angular material具有非常有用的无限滚动。我想你应该看看它

太棒了！很高兴这有帮助。

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

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