当div在屏幕底部(x)个像素内滚动时，AngularJS调用函数

Question

我正在尝试使用这个AngularJS infinite-scroll指令。来源：

angular.module('infiniteScroll', [])
    .directive('infiniteScroll', [ "$window", function ($window) {
        return {
            link:function (scope, element, attrs) {
                var offset = parseInt(attrs.threshold) || 0;
                var e = element[0];
                element.bind('scroll', function () {
                    if (scope.$eval(attrs.canLoad) && e.scrollTop + e.offsetHeight >= e.scrollHeight - offset) {
                        scope.$apply(attrs.infiniteScroll);
                    }
                });
            }
        };
    }]);

这似乎只适用于滚动框中包含的元素。这里有一个Plunker演示了这一点。

然而，我希望能够将这个简单的指令应用于静态的DOM元素，当元素接近窗口滚动的底部时调用scope.$apply(attrs.infiniteScroll)。

关于如何修改指令以允许这样做，有什么想法吗？我尝试过将e.scrollTop更改为window.scrollTop，但没有成功，不幸的是，这有点超出了我目前的技能水平。

Answer 1

我不完全确定我是否答对了你的问题。如果你想有一个调用函数的指令，如果某个DOM元素靠近整个窗口的可见区域，那么下面这样的指令怎么样：

myApp.directive('scrollTrigger', function($window) {
    return {
        link : function(scope, element, attrs) {
            var offset = parseInt(attrs.threshold) || 0;
            var e = jQuery(element[0]);
            var doc = jQuery(document);
            angular.element(document).bind('scroll', function() {
                if (doc.scrollTop() + $window.innerHeight + offset > e.offset().top) {
                    scope.$apply(attrs.scrollTrigger);
                }
            });
        }
    };
});

在HTML中可见区域下方的某个位置使用此元素：

<div scroll-trigger="scrollEventCallback()" threshold="100">Trigger element</div>

如果函数scrollEventCallback()位于文档当前可见区域下方100像素或以下，则调用该函数。请注意，我在这个例子中使用了jQuery，所以为了使它发挥作用，您还必须包括它。我希望这是你所要求的。