滚动事件不会激发内部指令 - angular.js [英] Scroll event is not fired inside directive - angular.js

问题描述

我stucked有问题。我有无限滚动，我听滚动事件指令。

：问题是，当我绑定到 $窗口的滚动事件只发射

  angular.element（$窗口）.bind（滚动，函数（）{
  的console.log（'勾勾！'）; //作品！
}）;element.bind（'滚动'，函数（）{
  的console.log（'勾勾！'）; //没有工作...：（（（
}）;
 

指令里面 NG-视图我发现这个问题，看起来非常相似，我的问题 - <一个href=\"http://stackoverflow.com/questions/18088283/binding-to-events-in-a-directive-which-is-inside-a-ng-view-doesnt-work\">Binding在一个指令，它是一个NG-视图中不起作用事件

任何人知道如何解决这个问题？谢谢！

我的指令：

  directives.directive（'scrolly'，函数（）{
    返回{
        限制：'A'，
        链接：功能（范围，元素，ATTRS）{
            变种原料=元素[0];            element.bind（'滚动'，函数（）{
                如果（raw.scrollTop + raw.offsetHeight＆GT; raw.scrollHeight）{
                    。范围$申请（attrs.scrolly）;
                }
            }）;
        }
    };
}）;
 

我的观点：

 ＆LT; UL类=项目换行scrolly =相册更多>>（）＆GT;
   ＆LT;李班=项NG重复=中的项项＆GT; {{item.name}}＆LT; /李＆GT;
＆LT; / UL＆GT;
 

解决方案

我已经为您创建这里提琴：的http：//的jsfiddle .NET / ADukg / 4831 /

有趣的是，我使用您的确切code和一切似乎触发罚款（参见全部散落的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屋！