在 Angular JS 中检测滚动到文档结束的实现答案

【问题标题】：Detect scrolled-to-document-end implementation in Angular JS在 Angular JS 中检测滚动到文档结束的实现
【发布时间】：2014-12-02 06:05:11
【问题描述】：

我知道如何在普通 JS 中滚动时检测文档结束，我的问题是 - 如何在 AngularJS 中实现它，我知道我应该将滚动事件附加到 $window 和 $document，我的问题是关于在哪里实现行为？指令？服务？，如果有人能告诉我在 AngularJS 中实现 kind of detection 的正确方法是什么，我将非常感激。

【问题讨论】：

你应该去看看这个模块的源代码。 binarymuse.github.io/ngInfiniteScroll。它在滚动检测方面做了很多工作。
@GordonBockus 感谢您的链接。

标签： javascript angularjs scroll

【解决方案1】：

在挣扎了很长时间之后，偶然发现了图书馆：http://binarymuse.github.io/ngInfiniteScroll/documentation.html。

根据您的用例，您可以执行以下操作：

<div infinite-scroll="addMoreItems()">
  <div ng-repeat="item in items">Item number {{$index}}: {{$item}}</div>
</div>

因为它允许您将它附加到任何 div - 您几乎可以在函数中做任何您想做的事情。

【讨论】：

谢谢，我去看看。
更新链接：sroze.github.io/ngInfiniteScroll/documentation.html

【解决方案2】：

根据您正在做的事情，它可以在多个地方组合使用。通常在处理 DOM 操作时（我假设会发生这种情况），您应该使用指令 - 例如：

app.directive("scrollDetector", ["$document", "$window", function($document, $window) {
    return {
        restrict: "A",
        link: function(scope, elem, attrs) {
            angular.element($window).bind("scroll", function() {
                //scroll logic here
            });
        }
    }
}]);

然后执行scroll-detector 指令。（例如：<div scroll-detector></div>）

【讨论】：