How to properly implement an infinite scrolling AngularJS table without JQuery?

Question

I have an AngularJS project (I don't use JQuery) where I need to display a table with users and load more as the user scrolls near the end of the page. I'm trying to implement this without relying on external libraries, since this is part of my requirements.

I've checked several examples like this, this and this.

But so far, none of the examples I've checked have helped me implement the infinite scrolling as I expected. They use different ways to calculate when to trigger the call, and some of this values return undefined to me (i.e. people say clientHeight and scrollHeight have different values, but to me it's always the same one, the total height including scrolling space).

I created a directive like the following:

usersModule.directive('whenScrollEnds', function($window) {
    return {
        restrict: "A",
        link: function(scope, elm, attr) {

          angular.element($window).bind('scroll', function() {

            var hiddenContentHeight = elm[0].scrollHeight - angular.element($window)[0].innerHeight;

            if ((hiddenContentHeight - angular.element($window)[0].scrollY) <= (10 )) {
              angular.element($window)[0].requestAnimationFrame(function(){
                scope.$apply(attr.whenScrollEnds);
              })
            }

          });
        }
    };
});

This kind of works but there's the following problems/doubts which I hope someone can explain to me:

It triggers too fast. I want the loading to trigger when I'm near the bottom of the scrollable space, like near 90% or so.
The scrollHeight is only accesible through elm[0], angular.element($window)[0] has no scrollHeight property so it returns undefined, and elm[0] has no scrollY value.
The scrollY value I get is the distance the scrollbar has moved from the top, minus the scrollbar length, but I feel like that value is wrong.
Is binding the scroll event through angular.element($window).bind the right decision?

How can I implement a proper infinite scrolling table? Am I using the correct variables? Please provide an answer that uses Javascript and AngularJS only, JQuery or libraries solutions won't help me.

Uriel Arvizu · Accepted Answer · 2016-04-29T15:59:36.883

After checking several examples and trying to avoid those that used JQuery as part of the solution I found a way to make this work.

First my directive that would handle when the scroll ends:

usersModule.directive('whenScrollEnds', function($window) {
    return {
        restrict: "A",
        link: function(scope, elm, attr) {
          var raw = elm[0];

          raw.addEventListener('scroll', function() {
            if ((raw.scrollTop + raw.clientHeight) >= (raw.scrollHeight )) {
                scope.$apply(attr.whenScrollEnds);
            }
          });
        }
    };
});

My view has the table inside a div like this:

  <div id="usersScrollable" when-scroll-ends="uc.loadMoreUsers()">
    <table id="tableUsers" class="table" ng-show="uc.users.length" >
      <thead>
      <tr>
        <th>Email</th>
        <th>Nombre Completo</th>
        <th>Estado</th>
        <th>Acción</th>
      </tr>
      </thead>
      <tbody >
      <tr ng-repeat="u in uc.users">
        <td>{{u.email}}</td>
        <td>{{u.fullName}}</td>
        <td>{{uc.getStateString(u.active)}}</td>
        <td><button type="button" class="btn btn-primary" ng-click="uc.edit(u)">Editar</button></td>
      </tr>
      </tbody>
    </table>
  </div>

Make sure the div that contains the table is the one listening to when the scrolling ends. This div has to have a set height, if it doesn't then the clientHeight property will be the same as scrollHeight (not sure what would happen if there's no height defined explicitly, like instead of setting the height you set the top or bottom properties).

In my controller, loadMoreUsers() is in charge of incrementing the page (in case there's more users, each call I get has the total of users so I can know before making another request how many users I have left), also it calls the function that makes the request to the web service.

score 1 · Answer 2 · answered May 11 '17 at 11:16

The problem with the solution provided by Uriel Arvizu is that if the raw element is empty because it is waiting for a Http Request at the page load, all the following raw.scrollTop, raw.clientHeight) and raw.scrollHeight will have wrong dimensions and the scroll is no working anymore.

I would suggest this other solution that basically adds the scroll event to the $window without cacheing it, so it is always sized correctly when the Http response is received.

(function () {
    'use strict';

    angular.module('ra.infinite-scroll', []).directive('infiniteScroll', function ($window) {
        return {
            restrict: 'A',
            scope: {
                infiniteScrollCallbackFn: '&'
            },
            link: function (scope, elem, attrs) {
                var percentage = (attrs.infiniteScrollPercentage !== undefined ? (attrs.infiniteScrollPercentage / 100) : '.9');
                var $element = elem[0];

                angular.element($window).on('scroll', function () {
                    if ((this.scrollY + this.innerHeight - $element.offsetTop) >= ($element.scrollHeight * percentage)) {
                        scope.$apply(scope.infiniteScrollCallbackFn);
                    }
                });
            }
        };
    });
})();

Also, with this module, you can pass 2 parameters in the HTML: a callback function and a percentage of the specific element (where the module is applied) that when it is reached the callback function is called, i.e. to repeat the Http request (default is 90% of that element).

    <div infinite-scroll infinite-scroll-callback-fn="callBackFunction()" infinite-scroll-percentage="80">
        // Here you may include the infinite repeating template 
    </div>

score 0 · Answer 3 · edited Jun 05 '20 at 20:35

Using example code of Ferie, yet I had to use mousewheel event instead of scroll and had to use elem.scrollTop() instead of elem.scrollY

app.directive('infiniteScroll', function ($window) {
        return {
            restrict: 'A',
            scope: {
                infiniteScrollCallbackFn: '&'
            },
            link: function (scope, elem, attrs) {
                var percentage = (attrs.infiniteScrollPercentage !== undefined ? (attrs.infiniteScrollPercentage / 100) : '.9');
                var $element = elem[0];

                angular.element($window).on('mousewheel', function () {
                    if ((elem.scrollTop() + this.innerHeight - $element.offsetTop) >= ($element.scrollHeight * percentage)) {
                        scope.$apply(scope.infiniteScrollCallbackFn);
                    }
                });
            }
        };
    });

when used in Angular table with a ng-repeat on the <tr>, I had to add the directive into the parent tbody of this tr in order to capture the right element containing the scroll state.

<tbody infinite-scroll infinite-scroll-callback-fn="callBackFunction()" infinite-scroll-percentage="80">

How to properly implement an infinite scrolling AngularJS table without JQuery?

3 Answers3