AngularJS: Infinite Scrolling

下拉滚动

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){
    var data = [];
  
    $scope.currentPage = 1;
    $scope.pageFlag = 1;
  
    function _getDataLength(){
        return data.length;
    }
  
    function _getItem(pageNumber){
        var pageSize = 20;
        var offset = (pageNumber - 1) * pageSize;
        var limit = pageSize || 10;
        var maxId = offset + limit - 1;
        var number;
        if(_getDataLength() < maxId){
          for(var i = 0;i<limit;i++){
                data.push({id:offset + i + 1});
          }
        }
        
        return data.slice(offset,offset + limit); 

    }
    

    $scope.items =  _getItem($scope.currentPage);

    $scope.loadMore = function() {
        $scope.currentPage = Math.max($scope.currentPage + 1 * $scope.pageFlag, 1);
        $scope.items = _getItem($scope.currentPage);
    };  
}

angular.module('scroll', []).directive('whenScrolled', function($timeout) {
    return function(scope, elm, attr) {
        var raw = elm[0];
        
        elm.bind('scroll', function() {
            if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight || raw.scrollTop === 0) {
              scope.pageFlag = raw.scrollTop === 0 ? -1 : 1;  
              
              $timeout(scope.$apply(attr.whenScrolled),500);
            }
        });
    };
});