ali haghighatkhah ali haghighatkhah - 9 months ago 36
AngularJS Question

how to get more items if page doesn't have scroll

I make calls for more items by infinite scrolling, but it fails if the initially loaded items don't fill the screen, I mean in this situation:

document.body.scrollHeight == document.body.clientHeight

the directive works fine if the page has scroll-bar:

app.directive('infinitescroll', function ($rootScope, $http, $window) {
return function ($scope, $element) {

angular.element($window).bind('scroll', function() {
// 100 pixels gap at the bottom of page for triggering the fetcher
clientHeight = html.scrollHeight - 100;
scrollHeight = html.scrollTop + document.querySelector('body').clientHeight;
if (clientHeight <= scrollHeight) {
fetcher ();

function fetcher () {
//get the Id of last item >> lastId
$http.get(app.apiBaseUrl + '/items/' + lastId).then(function (response) {
// now pushing new items to $scope

I can check in controller if

document.body.scrollHeight >= document.body.clientHeight

otherwise call for more items, but it's a bad practice to check scrollheight in controller, kindly please tell me how to check it in the above directive.

Answer Source

I want to suggest create Service for fetcher, and inject it in directive. Your fetcher can have a function into which you can pass id and it will do request to backend and will return the response, then you can inject it to your directive, about directive: You can make a directive with restriction A and set as body attribute like this:

<body infinitescroll>

In this way you will have in directive element which already wrapped in jQuery and you do not need to do document.querySelector('body') so after your calculation you can fetch your data from server and send it to those controller which you need through $emit or $boradcast