AngularJS: Infinite Scrolling

by dandoyon

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

JavaScript

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

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

        var funCheckBounds = function(evt) {
            console.log("event fired: " + evt.type);
            var rectObject = raw.getBoundingClientRect();
            if (rectObject.bottom === window.innerHeight) {
                scope.$apply(attr.whenScrolled);
            }

        };
        
        
        //$timeout(function() {
            angular.element(window).bind('scroll load', funCheckBounds);                
        //}, 2000)
        
        
    };
});