本文介绍如何利用ngInfiniteScroll插件在AngularJS中实现页面滚动到底部自动加载数据的功能。详细说明了插件下载、针对jQuery 2.0+版本的源码修改方法、HTML引入方式以及Controller与View的具体代码实现，并简述了AngularJS的执行流程。
AngularJS无限滚动加载实现步骤
要实现页面滚动到底部自动加载数据的功能，可以借助第三方控件 来完成。具体实施步骤如下：
第一步，下载 ng-infinite-scroll.js 程序，访问地址 http://sroze.github.io/ngInfiniteScroll/，当前最新版本为 1.0.0。
第二步，若项目中使用的 jQuery 版本在 2.0 以上，需要对 ng-infinite-scroll.js 源码进行适配修改。具体操作是将代码中所有的 $window.xxx 替换为 $(window).xxx，并将 elem.xxx 替换为 $(elem).xxx。
第三步，在 HTML 文件中引入必要的脚本文件。
需要在 HTML 中依次引入 jQuery、AngularJS 以及 ng-infinite-scroll 的脚本，代码如下： <script type='text/javascript' src='path/to/jquery.min.js'></script> <script type='text/javascript' src='path/to/angular.min.js'></script> <script type='text/javascript' src='path/to/ng-infinite-scroll.min.js'></script>
第四步，编写 HTML 示例代码以集成滚动加载功能。
<div ng-controller='PostListController'>
<div infinite-scroll='demo.nextPage()' infinite-scroll-disabled='demo.busy' infinite-scroll-distance=''>
<div ng-repeat='item in demo.items'>
<p>
<input type="hidden" value="{{item.PostId}}" />
<label>{{item.WriterName}}</label>
<label>{{item.WriterMail}}</label>
<label>{{item.WreckerName}}</label>
<label>{{item.StartDate}}</label>
<label>{{item.Location}}</label>
<label>{{item.Story}}</label>
</p>
</div>
<div ng-show='demo.busy'>Loading data...</div>
</div>
</div>对应的 HTML 结构示例如下：
var ftitAppModule = angular.module('ftitApp', ['infinite-scroll']);
ftitAppModule.controller('PostListController',
function ($scope, Demo) {
$scope.demo = new Demo();
});
// 创建后台数据交互工厂
ftitAppModule.factory('Demo', function ($http) {
var Demo = function () {
this.items = [];
this.busy = false;
this.after = '';
this.page = ;
};
Demo.prototype.nextPage = function () {
if (this.busy) return;
this.busy = true;
var url = "http://...:/api/post/nextpage?id=" + this.page + "&callback=JSON_CALLBACK";
$http.jsonp(url).success(function (data) {
var items = data;
for (var i = ; i < items.length; i++) {
this.items.push(items[i]);
}
this.after = "t_" + this.items[this.items.length - ].id;
this.busy = false;
this.page += ;
}.bind(this));
};
return Demo;
});第五步，编写 PostListController.js 控制器逻辑。
通过上述配置与代码，即可实现页面拖动至底部时，自动从服务器加载后续数据的功能。
AngularJS执行流程解析
补充说明：AngularJS 的加载与执行过程大致如下：
1. HTML 页面加载，此过程会触发加载页面中包含的所有 JavaScript 文件（包括 AngularJS 本身）。
2. AngularJS 启动后，会搜寻页面中所有的指令（directive）。
3. 找到 ng-app 后，会搜寻其指定的模块（Module），并将其附加到 ng-app 所在的组件上。
5. 每当检测到 ng-controller 或 ng-repeat 指令时，系统会创建一个新的作用域（scope），该作用域构成了组件的运行上下文，并定义了各 DOM 组件对函数及变量的访问权限。
5. 每次遇到 ng-controller 或 ng-repeat 时，它会创建一个作用域（scope），该作用域即为组件的上下文。作用域决定了每个 DOM 组件对函数和变量的访问权限。
6. AngularJS 随后会添加对变量的监听器，并监控每个变量的当前值。一旦值发生变化，AngularJS 会更新其在页面上的显示。