javascript - 指令内未触发滚动事件 - angular.js

Question

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

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

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

指令位于 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

这可能是因为您绑定(bind)的元素不会“滚动”。

您实际滚动的节点(文档，或者可能是具有滚动溢出的 div)是实际触发事件的东西。

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

$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);
            });
        }
    };
});

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

希望对您有所帮助。