Scroll event is not fired inside directive - angular.js
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.
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.