在angularjs和jade中使用无限滚动
我在我的仪表板web应用程序中使用angularjs无限滚动 。 我有一个页面，其中包含多个无限可滚动的小部件。 因为我希望每个都有一个无限滚动，所以我决定使用这个指令，但不知怎的，它没有按预期工作。 我希望无限滚动相对于内部内容div滚动条工作，它使用完美的滚动条而不是主浏览器窗口。 我在谷歌搜索并发现多个线程解释2个新变量，可用于更改默认行为： infinite-scroll-container和infinite-scroll-parent 。 我试过了，但没有一个能为我工作。 我认为使用完美滚动条会产生问题。
玉代码：
.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。
如何在无限滚动容器中注入动态类？
我收到以下错误：
错误：无法在’Document’上执行’querySelector’：’＃streamScroll – {{$ index}}’不是有效的选择器。
PS我见过以下线程，但没有一个满足我的要求：
https://github.com/sroze/ngInfiniteScroll/issues/57
angularjs容器中的无限滚动
AngularJS – ng-repeat分配/生成新的唯一ID
我不确定你在infinite-scroll-container参数中需要花括号。 你应该在其中传递可计算字符串，所以我建议你这样尝试：
infinite-scroll-container="'#streamScroll-' + $index"
导致此参数与其他参数一样，不需要使用花括号进行插值，可以使用该表达式。
这不是问题的实际答案，但值得尝试。
我可以告诉你如何编写自己的无限滚动指令。 这是代码：
HTML
...
指令：
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. };
请注意，html div标记中的load-on="scrollToTop"是可选的。 仅当您想要在滚动到顶部时执行loadSomeData()函数时，否则它将在滚动到div的底部时执行该函数。
角度材料具有非常有用的无限滚动。 我想你应该看看Infinite Scroll