在angularjs和jade中使用无限滚动答案

【问题标题】：Using Infinite scroll in angularjs and jade在angularjs和jade中使用无限滚动
【发布时间】：2015-10-17 19:17:45
【问题描述】：

我在我的仪表板网络应用程序中使用 angularjs 无限 scroll。我有一个包含多个无限可滚动小部件的页面。因为我想为它们中的每一个设置一个无限滚动，所以我决定使用this 指令，但不知何故它没有按预期工作。我希望无限滚动相对于使用完美 scrollbar 而不是主浏览器窗口的内部内容 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}}' 不是有效的选择器。

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

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

angularjs infinite scroll in a container

AngularJS - ng-repeat to assign/generate a new unique ID

【问题讨论】：

标签： javascript jquery angularjs pug nginfinitescroll

【解决方案1】：

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

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

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

【讨论】：

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

【解决方案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的底部时执行该函数。

【讨论】：

【解决方案3】：

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

【讨论】：