angularjs infinite scroll not working

Question

I am trying to get infinite scrolling working in angularjs with no luck. Below is my html code:

   <div ng-app='herbivore' ng-controller='Scroller'>
                      <div id="fixed" when-scrolled="loadMore()">
                        <div ng-repeat='item in items'>
                          <tr><td style="text-align:center">{{item.id}}</td>

               </div>                   
              </div>
            </div>

Below is my angularjs code:

     function Scroller($scope, $http) {
$scope.items = [];

var url = "/admin/getusers?type=" + "today";

 $scope.loadMore = function() {

    $http({
        'url': url,
        'method': 'GET'
    })
        .success(function (data) {

  var items = data.response;     
  for (var i = 0; i < items.length; i++) {
      if(i < 5)
          alert("item=" + items[i].id);    
    $scope.items.push({id: i});
  }

});
};
   $scope.loadMore();

}

angular.module('scroll', []).directive('whenScrolled', function() {
return function(scope, elm, attr) {
    var raw = elm[0];

    elm.bind('scroll', function() {
        if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
            scope.$apply(attr.whenScrolled);
        }
    });
};

});

I copied most of this code from an example and I can't see why it isn't working. I made sure data was coming back from my http get by alerting the response. So data is coming back but nothing is being displayed on the web page. Any help is appreciated.

I am showing my code again and it seems my program logic never reaches the end.

  function Scroller($scope, $http, $q, $timeout) {

  $scope.items = [];

 $scope.loadMore = function() {      

    var url = "/admin/getusers?type=" + "today";
    var d = $q.defer();
  $http({
        'url': url,
        'method': 'GET'
    })
        .success(function (data) {

  var items = data.response;      
  for (var i = 0; i < items.length; i++) {     
    $scope.items.push({username: items[i].username});
  }
  d.resolve($scope.items);     
  alert("end loop");

}
 );
  alert("d.promise");
return d.promise;       
 };
  alert("end of loadMore");

  $scope.loadMore();
 }

The alert for 'd.promise' displays first. Then the alert for 'end loop' displays next. the alert for 'end of loadMore' never displays. Can someone show what code I am missing to make this data show up in my web page? I am getting data back.

I did look at the question you referred me to and I made some changes such as return promise, $timeout, etc. but it still does not populate my web page even though data is coming back. Also, what is loadMore.then function()? — Dave
– Dave, Commented Feb 14, 2014 at 19:19
You should use ngInfiniteScroll, take a look at this example: 4dev.tech/2015/08/… — Leonardo Jines
– Leonardo Jines, Commented Aug 18, 2015 at 23:39

Jaime Agudo · Accepted Answer · 2014-02-14 19:48:49Z

1

The answer is on the The Promise API

A new promise instance is created when a deferred instance is created and can be retrieved by calling deferred.promise.

The purpose of the promise object is to allow for interested parties to get access to the result of the deferred task when it completes.

Methods

then(successCallback, errorCallback, notifyCallback) – regardless of when the promise was or will be resolved or rejected, then calls one of the success or error callbacks asynchronously as soon as the result is available. The callbacks are called with a single argument: the result or rejection reason. Additionally, the notify callback may be called zero or more times to provide a progress indication, before the promise is resolved or rejected.

This method returns a new promise which is resolved or rejected via the return value of the successCallback, errorCallback. It also notifies via the return value of the notifyCallback method. The promise can not be resolved or rejected from the notifyCallback method.

catch(errorCallback) – shorthand for promise.then(null, errorCallback)

finally(callback) – allows you to observe either the fulfillment or rejection of a promise, but to do so without modifying the final value. This is useful to release resources or do some clean-up that needs to be done whether the promise was rejected or resolved. See the full specification for more information.

Because finally is a reserved word in JavaScript and reserved keywords are not supported as property names by ES3, you'll need to invoke the method like promise'finally' to make your code IE8 compatible.

answered Feb 14, 2014 at 19:48

Jaime Agudo

8,3264 gold badges34 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dave Over a year ago

I added this code : return d.promise }; var promise = Scroller($scope, $http, $q, $timeout); promise.then(function(message) { alert("message=" + message); }); and now I get the error: RangeError: Maximum call stack size exceeded. How do I resolve this error?

Dave Over a year ago

Never mind my last comment. I am still trying to wrap my head around the promise function. I wish I could find a good example. I am updating the items array and nothing gets back to the web page. I guess I don't understand why the examples on the internet don't show how to use promise.

Pang · Accepted Answer · 2015-03-20 07:06:10Z

0

Is this issue because of not having a fixed height on the parent div with id="fixed"? I have observed that your code is only working if this div with id="fixed" has a fixed height.

edited Mar 20, 2015 at 7:06

Pang

10.2k146 gold badges87 silver badges126 bronze badges

answered Apr 21, 2014 at 12:41

Shreerang

3871 gold badge4 silver badges15 bronze badges

Collectives™ on Stack Overflow

angularjs infinite scroll not working

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest