无限滚动（Infinite Scroll）也称为自动分页、滚动分页和无限分页。常用在图片、文章或其它列表形式的网页中，用来在滚动网页到页面底部的时候自动加载下一页的内容。

这种形式最早由twitter使用，后来必应图片搜索、谷歌图片搜索、google reader等纷纷采用了这一项技术，于是靠滚动浏览器滚动条来翻页的技术慢慢在互联网上遍站开花。该技术非常适合移动端的数据自动加载。

ngInfiniteScroll是用于AngularJS的无限滚动控件，特点是简单易用，是angularjs社区里应用最为广泛的”触底加载”控件。

官方网站 / GitHub / Demo / Documentation

栗子如下，先引入必备文件（注意加载顺序）

<script type="text/javascript" src="yourpath/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="yourpath/angular.min.js"></script>
<script type="text/javascript" src="yourpath/ng-infinite-scroll.min.js"></script>

1、注入到module

var myApp = angular.module('myApp', ['infinite-scroll'])

2、定义factory

myApp.factory('scrollLoadData', ['$http','common','$rootScope',
function($http,common,$rootScope){
	var myData = function(url){
		this.items = [];
		this.busy = false;
		this.after = 1;
		this.url = url;
	};
	myData.prototype.nextPage = function(){
		if(this.busy){
			return;
		}
		this.busy = true;
		var myurl = $rootScope.serverUrl+this.url+"?pageNum="+this.after;
		$http.get(myurl).success(function(res){
			if(res.data.list.length > 0){
				var items = res.data.list;
				for(var i = 0; i < items.length; i++){
					this.items.push(items[i]);
				}
				this.busy = false;
				this.after += 1;
				if(this.after > res.data.totalPage){
					this.busy = true;
				}
			}else{
				this.busy = true;
			}
		}.bind(this));
	};
	return myData;
}]);

3、controller中

myApp.controller("myController",['$scope','scrollLoadData',function($scope,scrollLoadData){
	$scope.doMore = new scrollLoadData("aaa/list");
}])

4、template中

<div infinite-scroll="doMore.nextPage()" infinite-scroll-disabled="doMore.busy" infinite-scroll-distance="0">
  <dl ng-repeat="x in doMore.items">
    <dt>{{x.title}}<span>{{x.time | limitTo:10}}</span></dt>
    <dd>{{x.content}}</dd>
  </dl>
</div>
<div ng-if="doMore.busy">加载中...</div>

5、错误写法

<div ng-repeat="x in doMore.items" infinite-scroll="doMore.nextPage()">

ng-repeat和infinite-scroll不能放在同一个标签下。