19

我在我的仪表板网络应用程序中使用 angularjs 无限滚动。我有一个包含多个无限可滚动小部件的页面。因为我想为它们中的每一个设置一个无限滚动，所以我决定使用这个指令，但不知何故它没有按预期工作。我希望无限滚动相对于使用完美滚动条而不是主浏览器窗口的内部内容 div 滚动条起作用。我在 google 上进行了搜索，发现多个线程解释了 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。

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

我收到以下错误：

错误：无法在“文档”上执行“querySelector”：“#streamScroll-{{$index}}”不是有效的选择器。

PS我看过以下线程，但没有一个能满足我的要求：

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

容器中的angularjs无限滚动

AngularJS - ng-repeat 分配/生成一个新的唯一 ID

4

3 回答 3

8

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

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

因为这个参数和其他参数一样，不需要用大括号插值，它准备取表达式。

于 2015-10-21T11:16:26.087 回答
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 的底部时执行函数。

于 2015-10-27T15:20:04.377 回答
1

Angular 材质有非常有用的无限滚动。我觉得你应该看看无限卷轴

于 2015-10-27T15:25:46.920 回答