我在我的仪表板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我见过以下线程,但没有一个满足我的要求:
我试图让ngInfiniteScroll工作,但徒劳无功--Plunker.滚动事件仅在页面加载时触发,之后似乎没有任何内容触发它.任何人都可以请一些亮点.
我尝试了各种组合,没有工作:
infinite-scroll='loadMore()' infinite-scroll-distance='2' infinite-scroll-container="'#list-wrapper'"
infinite-scroll='loadMore()' infinite-scroll-distance='2' infinite-scroll-parent
infinite-scroll='loadMore()' infinite-scroll-distance='2'
HTML:
<body ng-app="app" ng-controller="listController">
<div id="list-wrapper">
<div class="list" infinite-scroll='loadMore()'
infinite-scroll-distance='2'
infinite-scroll-container="'#list-wrapper'">
<div class="header">
</div>
<div class="list-table" >
<table class="table">
<tbody>
<tr ng-repeat="item in infiniteList">
<td style="width:100%">
<div>{{item}}</div>
</td>
</tr>
</tbody>
</table>
</div>
<div style='clear: both;'></div>
</div>
</div>
JS:
var app = angular.module("app", ['infinite-scroll']);
app.controller('listController', ['$scope','$http', function ($scope,$http) {
$scope.infiniteList = [];
$scope.incr = 1;
$scope.loadMore = function(){
console.log("scroll");
for(var i = 0; i< 30; i++){
$scope.infiniteList.push("Item " + …