在angularjs和jade中使用无限滚动

Question

我在我的仪表板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

Answer 1

我不确定你在infinite-scroll-container参数中需要花括号.你应该在其中传递可计算字符串,所以我建议你这样尝试:

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

导致此参数与其他参数一样,不需要使用花括号进行插值,它可以使用表达式.