AngularJS: Infinite Scrolling

by Avi Algaly

HTML

<script src="http://code.angularjs.org/1.0.0rc9/angular-1.0.0rc9.js"></script>
<div id="fixed" when-scrolled="loadMore()">
  <ul>
    <li ng-repeat="i in items">{{i.id}}</li>
  </ul>
</div>

CSS

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

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

JavaScript

function Main($scope) {
  $scope.items = [];

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

  $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);
      }
    });
  };
});