指令中没有触发滚动事件 - angular.js [英] Scroll event is not fired inside directive - angular.js

问题描述

我遇到了问题。我有一个无限滚动的指令，我在那里听滚动事件。问题是，当我绑定到 $ window 时，滚动事件才被触发：

 code> angular.element（$ window）.bind（'scroll'，function（）{
 console.log（'Gogo！'）; // works！
}）; 
 
 element.bind（'scroll'，function（）{
 console.log（'Gogo！'）; //不工作...：（（（
}）; 
  

指令位于 ng-view 我发现这个问题，看起来非常类似于我的问题 - 绑定到ng视图内的指令中的事件不起作用

任何人都知道如何谢谢！谢谢！

我的指令：

  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）{
范围。$ apply（attrs.scrolly）; 
 } 
}）; 
} 
}; 
}）; 
  

我的观点：

 < ul class =items-wrapscrolly =showMore（）> 
< li class =itemng-repeat =项目中的项目> {{item.name}}< / li> 
< / ul> 
  

解决方案

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

有趣的是，我使用了您的确切代码，并且似乎都触发了所有的错误（请参阅所有的小费用 console.log（）调用）。我怀疑你的问题与你的CSS样式有关，因为没有正确的使用溢出，我无法获得触发的滚动事件。

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

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

Anybody knows how to solve this? Thanks!

My directive:

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

My view:

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

解决方案

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

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屋！