Scroll event is not fired inside directive - angul

问题:

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>

回答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.

回答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.