ngInfiniteScroll - 每次鼠标滚动都会调用loadMore()方法

Question

解决方案如下解决方案.

问题:我的loadMore()方法在每个容器的滚动上执行.

含义:loadMore()在父容器的每个鼠标滚动上执行(infinite-scroll-parent="true")

期望的结果:只有当infiniteScrollDistance满足条件时才能执行loadMore(),而不是执行任何细微的滚动.

我的代码受到demo_basic和demo_async的高度启发.

我的应用是一个照片库.我通过ajax调用加载照片,并将它们填充到缩略图指令转发器中.我在控制器初始化时禁用ng-Infinite-Scroll,并在回调成功时启用它.

    <div class="thumbnails grid__item page--content">
            <div id="gallery" class="unstyled-list" 
                    infinite-scroll='loadMore()' 
                    infinite-scroll-disabled='album.busy' 
                    infinite-scroll-parent="true" 
                    infinite-scroll-immediate-check="false" 
                    infinite-scroll-distance='2'>
                    <my-photo-directive ng-repeat="photo in photos"></my-photo-directive>
            </div>
    </div>

我的咖啡代码没什么意外.它的逻辑是不重要的,因为如果我放置一个简单的console.log,问题仍然会发生.....

    $scope.album.busy = true
    $scope.loadMore = ->
            $scope.$apply ->
                    $scope.album.busy = true
            console.log('loadMore() been executed here')

我的缩略图指令是一样的.没有惊喜,当最后的照片被填充到转发器上时,我启用了组件.

    app.directive 'myPhotoDirective', ['$window', ($window) ->
        return {} =
            ....
            link: (scope, element, attrs) ->
                if scope.$last
                    scope.album.busy = false

我不知道我错过了什么或做错了什么.我希望有人会来这里帮助我.

谢谢.

Answer 1

如果没有Plunker来查看实际代码,我会直接指向ngInfiniteScroll FAQ:

为什么ngInfiniteScroll会在每个滚动事件上触发我的表达式？

infiniteScroll指令使用它所附加元素的高度来确定它与窗口底部的接近程度.在某些情况下,浏览器可以报告高度为0,这会导致此行为.通常,这是由于容器元素仅包含浮动子元素.解决此问题的最简单方法是在容器的底部添加一个"spacer"元素(类似于<div style='clear: both;'></div>); 请参阅此StackOverflow问题及其相关答案以获取更多详细信息.

Answer 2

让我加上我的两分钱,有完全相同的问题,不同的解决方案!我整天都在调试ng-infinite-scroll.有一次,我意识到javascript报告$(window).height() == $(document).height()没有任何意义.

我做了一些谷歌搜索,它发生在你缺少DOCTYPE时:jquery $(窗口).height()返回文档高度

但是,这还不够!我的DOCTYPE一度被浏览器吃掉了.你可以进一步阅读:wordpress上的$(window).height()太多了

Answer 3

我已经解决了我的问题。

NIS ( ngInfiniteScroll ) 测量的基础属性之一是$container和$elem

1. $container 是滚动元素 Element 的父级。
2. $elem 是包含滚动元素的元素。

例子

<$container> <!-- can be a div -->
    <$elem> <!-- can be a list -->
        <photo/>
        <photo/>
        <photo/>
        <photo/>
    </$elem>
</$container>

NIS 试图做的是计算每次鼠标滚动时，如果启用，这两个元素之间的关系，并检查是否$elem高于$container，然后向下滚动。（它还检查其他属性，如 - 距离、立即检查和禁用）。

因此，这两个基本元素之间的这种关系对于 NIS 的理解和调试至关重要。

所以我的问题正是 - $container 和 $elem 在它们的高度上是相等的。
我在两个元素上都固定了 css 高度值 (100%)（主要是因为我在文档中读到我必须传递高度），但我错误地修复了$elem完全错误的位置。

其次 -infinite-scroll-distance也可能导致这种情况发生。如果您设置的值很高（假设为 2），并且您的loadMore()方法没有填充足够的项目，即使您禁用该方法的运行时，您也会获得无限loadmore()执行。