Question

我遇到了问题。我有一个无限滚动的指令，我在那里听scroll事件。问题是滚动事件仅在我绑定到$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

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

您实际滚动的节点（文档或带有滚动溢出的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);
            });
        }
    };
});

然后研究元素定位和其他逻辑。

我希望有所帮助。

Answer 2

我在这里为你创造了一个小提琴：http://jsfiddle.net/ADukg/4831/

有趣的是，我使用了您的确切代码，一切似乎都触发了（请参阅所有乱七八糟的console.log()调用）。我怀疑你的问题与你的CSS样式有关，因为没有正确使用溢出，我无法触发滚动事件。

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

2 个答案: