AngularJS: Infinite Scrolling

by arjunasuresh3

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.17/angular.min.js"></script>
<div id="fixed" when-scrolled="ctrl.loadMore()">
  <ul>
    <li ng-repeat="i in ctrl.items">{{i.id}}</li>
  </ul>
</div>

CSS

li {
  height: 120px;
  border-bottom: 1px solid gray;
}

#fixed {
  height: 400px;
  overflow: auto;
}

JavaScript

var app = angular.module('scroll', []);
app.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);
      }
    });
  };
}).controller('MyCtrl', function($scope) {
  var ctrl = this;
  ctrl.items = [];

  var counter = 0;
  ctrl.loadMore = function() {
    for (var i = 0; i < 5; i++) {
      ctrl.items.push({
        id: counter
      });
      counter += 10;
    }
  };

  ctrl.loadMore();
});