在指令 - 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... :(((
});

指令在里面ng-view我找到了这个问题,看起来与我的问题非常相似 - 绑定到ng-view内的指令中的事件不起作用

谁知道怎么解决这个问题？谢谢!

我的指示:

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样式有关,因为没有正确使用溢出,我无法触发滚动事件.