AngularJS - A simple infinite scroll

Question

I am trying to write a similar small infinite scroll to the one found here: http://jsfiddle.net/vojtajina/U7Bz9/

I\'ve been able to display the first 5 pieces of dat

Answer 1

There are two problems. First of all, what is attr.whenScrolled? Its undefined. Second one - limitTo: 5. You will allways show only 5 elements!

Here you have working code: http://plnkr.co/edit/VszvMnWCGb662azo4wAv?p=preview

What was changed? Your directive is called directiveWhenScrolled so call:

scope.$apply(attr.directiveWhenScrolled);

instead of

scope.$apply(attr.whenScrolled);

How lets deal with static limit. Change it into variable (remember about defining default value):

{{ i.Title }}

And now your loadMore function should look like this:

$scope.loadMore = function() {
    $scope.limit += 5;
};