Scroll event is not fired inside directive - angular.js

Question

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 bind

Answer 1

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.

Answer 2

It's likely because the element you're binding to doesn't "scroll".

The node that you're actually scrolling (the document, or maybe a div with a scroll overflow) is the thing that actually fires the event.

Try injecting $document into your directive and setting up the scroll event on that:

$document.bind('scroll', function (){});

Also, ditch the if statement on the inside of handler until you're sure you have the event firing properly, then add it back.

Just to start:

app.directive('scrolly', function ($document) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {

            $document.bind('scroll', function () {
                scope.$apply(attrs.scrolly);
            });
        }
    };
});

Then work in your examination of the element positioning and other logic.

I hope that helps.