ngInfiniteScroll - loadMore（）方法被调用的每个鼠标，滚动 [英] ngInfiniteScroll - loadMore() method gets called on every mouse-scroll

问题描述

问题：我loadMore（）方法在每个容器的滚动执行

Problem: My loadMore() method gets executed on every container's scroll.

含义：loadMore（）获取父容器的每个鼠标的滚动执行（无限滚动父=真正的）

Meaning: loadMore() gets executed on each mouse scroll of the parent container (infinite-scroll-parent="true")

期望的结果：让loadMore（）执行，只有当infiniteScrollDistance满足其条件，而不是任何尖细滚动我

Desired result: to get loadMore() execute only when infiniteScrollDistance meets its conditions, instead of any tinny scroll I do.

我的code高度由 demo_basic ＆放启发; demo_async 。

My code is highly inspired by the demo_basic & demo_async.

我的应用程序是一个照片廊。
我加载照片通过Ajax调用，并把它们填充到缩略图指令中继器。
我禁用NG-无穷滚动控制器的初始化，并使其在回调的成功。

My app is a photos gallery. I load the photos by ajax call, and populate them into a thumbnail directive repeater. I disable ng-Infinite-Scroll on controller initialization, and enable it on callback success.

    <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>

我的咖啡code有没有惊喜。
它的逻辑是不重要的，因为如果我把一个简单的console.log，问题仍然存在.....

My coffee code has no surprises. It's logic is unimportant, because if I place a simple console.log, the problem still occurs.....

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

我的缩略图指令是一样的。没有意外，最后时刻被照片上填充直放站，我启用组件。

My thumbnail directive is the same. No surprises, moment last photos gets populated onto the repeater, I enable the component.

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

我不知道我缺少或做错了。
我希望有人会在这里帮助我。

I got no idea what i'm missing or doing wrong. I hope someone will be here to help me.

感谢您。

推荐答案

我已经解决了我的问题。

壹基金性质的新谢克尔（ ngInfiniteScroll 的）措施，为 $容器和 $ ELEM

One of foundation properties that NIS (ngInfiniteScroll) measure, are $containerand $elem

1. $容器是滚动的元素元素的父。


2. $ ELEM 是包含滚动元素的元素。

1. $container is the parent of the scrolled elements Element.
2. $elem is the Element that contain the scrolled elements.

的示例的

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

什么NIS正在试图做的，是要计算每个鼠标滚动，如果启用，这两个元素之间的关系，并检查是否 $ ELEM 比<高code> $容器，然后向下滚动与否。 （它也检查其他属性，如 - 距离，直接检查和放大器;禁用）

What NIS is trying to do, is to calculate on each mouse scroll, if enabled, the relation between these two elements, and check if $elem is taller than $container, and then scroll down or not. (it also check other properties like - distance, immediate-check & disabled).

所以这两个基本元素之间的这种关系，是认识和放大器的关键; NIS的调试。

So this relation between this two fundamental elements, is crucial for the understanding & debugging of NIS.

所以我的问题是，正是 - 的$容器和$ ELEM是他们的高度等于结果
我有两个元素固定CSS高度值（100％）（主要是因为我的文档中读到，我必须通过高度），并通过错误，我固定 $ ELEM 这是完全错误的。

So my problem was exactly that - The $container and $elem were equal at their height.
I had fixed css height values (100%) on both elements (mainly cause I read in the documentation that I must pass height), and by mistake I fixed $elemwhich was totally wrong.

第二 - 无限滚动的距离 可能会导致这也发生。
如果你设置的值高（假设2），你的 loadMore（）方法不填充足够的项目，即使禁用方法的运行时间，比你会得到无限的 loadmore（）执行

Secondly - infinite-scroll-distance can cause this to happen as well. If the value that you're setting is high (let's say 2), and your loadMore() method don't populate enough items, even if you disable runtime of the method, than you will get infinite loadmore() executions.

这篇关于ngInfiniteScroll - loadMore（）方法被调用的每个鼠标，滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！