CODEWITHSUNDEEP
javascriptangularjsscroll
Aviel Fedida
Aviel Fedida

Reputation: 4102

Detect scrolled-to-document-end implementation in Angular JS

I know how to detect the document end while scrolling in plain JS, my problem is - how to implement that in AngularJS, I know I should attach the scroll event to both the $window and $document, my question is about where to implement the behavior?, directives?, services?, if anyone can show me what is the right way to implement that kind of detection in AngularJS I'll be very thankful.

Upvotes: 0

Views: 195

Answers (2)

Ajay Pal Singh
Ajay Pal Singh

Reputation: 712

After struggling with it for a long time- stumbled across the library: http://binarymuse.github.io/ngInfiniteScroll/documentation.html.

Based on your use-case, you could do something like:

<div infinite-scroll="addMoreItems()">
  <div ng-repeat="item in items">Item number {{$index}}: {{$item}}</div>
</div>

As it allows you to attach this to any div- you could almost do anything in the function you want to.

Upvotes: 2

tymeJV
tymeJV

Reputation: 104775

Depending on what you're doing it can go in a combination of places. Typically when dealing with DOM manipulation (which is what I assume will be happening) you should use a directive - something like:

app.directive("scrollDetector", ["$document", "$window", function($document, $window) {
    return {
        restrict: "A",
        link: function(scope, elem, attrs) {
            angular.element($window).bind("scroll", function() {
                //scroll logic here
            });
        }
    }
}]);

And then implement the scroll-detector directive. (ex: <div scroll-detector></div>)

Upvotes: 1

Related Questions