AngularJS: Infinite Scrolling

by Vojtech Mares

HTML

<script src="https://code.angularjs.org/1.3.0-beta.10/angular.js"></script>
<div id="fixed" when-scrolled="loadMore()">
  <ul>
      <li ng-repeat="i in items">{{i.id}}
          <a href ng-click="loadMore()">- accessible valid link -</a>
          <br />
          <a tabindex="0" ng-click="loadMore()">- accessible valid link -</a>
          <br />
          <a ng-click="loadMore()">- accessibility bad -</a>
          <br />
          <a ng-href="loadMore()">- accessibility good, but reloads -</a>
      </li>
  </ul>  
</div>

CSS

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

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

JavaScript

//https://docs.angularjs.org/api/ng/directive/ngHref        

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