滚动事件未在指令内触发 - angular.js [英] Scroll event is not fired inside directive - angular.js

问题描述

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

I'm stucked with problem. I have a directive for infinite-scroll where I listen for scroll event. The problem is that scroll event is only fired when I'm binding to $window:

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

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

指令在 ng-view 里面-in-a-directive-which-is-inside-a-ng-view-doesnt-work">绑定到 ng-view 内的指令中的事件不起作用

Directive is inside ng-view I found this question, looks very similar to my problem - 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>

推荐答案

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

I have created a fiddle for you here: http://jsfiddle.net/ADukg/4831/

有趣的是，我使用了您的确切代码，并且一切似乎都可以正常触发(查看所有乱七八糟的 console.log() 调用).我怀疑您的问题与您的 CSS 样式有关，因为如果没有正确使用溢出，我无法触发滚动事件.

The interesting thing is that I used your exact code, and everything seems to trigger fine (see all the littered console.log() calls). I suspect your problem has to do with your CSS styling though, as without the right use of overflow, I could not get the scroll event to trigger.

这篇关于滚动事件未在指令内触发 - angular.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！