滚动事件不会在指令内触发 - angular.js

Question

我遇到了问题。我有一个无限滚动指令，我在其中监听 scroll 事件。问题是只有当我绑定到$window时才会触发滚动事件：

angular.element($window).bind('scroll', function () {
  console.log('Gogo!'); //works!
});

element.bind('scroll', function () {
  console.log('Gogo!'); //doesn't work... :(((
});

Directive 在 ng-view 里面我发现了这个问题，看起来和我的问题很相似 - Binding to events in a directive which is inside a ng-view doesn't work

有人知道如何解决这个问题吗？

我的指令：

directives.directive('scrolly', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var raw = element[0];

            element.bind('scroll', function () {
                if (raw.scrollTop + raw.offsetHeight > raw.scrollHeight) {
                    scope.$apply(attrs.scrolly);
                }
            });
        }
    };
});

我的看法：

<ul class="items-wrap" scrolly="showMore()">
   <li class="item" ng-repeat="item in items">{{item.name}}</li>
</ul>

Answer 1

这可能是因为您绑定的元素没有“滚动”。

您实际滚动的节点（文档，或者可能带有滚动溢出的 div）是实际触发事件的对象。

尝试将$document 注入您的指令并在其上设置滚动事件：

$document.bind('scroll', function (){});

另外，放弃处理程序内部的 if 语句，直到您确定事件正确触发，然后将其添加回来。

刚刚开始：

app.directive('scrolly', function ($document) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {

            $document.bind('scroll', function () {
                scope.$apply(attrs.scrolly);
            });
        }
    };
});

然后检查元素定位和其他逻辑。

希望对你有帮助。