English
资源说明：由于最近的一个项目使用的是angularjs1.0的版本，涉及到分页查询数据的功能，后来自己就用自定义指令实现了该功能。现在单独做了个简易的小demo，主要是为了分享自己写的分页功能。注：本实例调用的是真实接口数据。
首先、小demo的目录结构如下：
一、代码部分
下面直接把每一个文件的代码贴出来，重点是ListCtrl.js和pageDirective.js：
1、index.html
<!DOCTYPE html>
<html lang="en" ng-app="app" ng-cloak>
<head>
<meta charset="UTF-8">
<title>Title<
在本文中，我们将深入探讨如何使用AngularJS的自定义指令来实现一个分页插件，以满足项目中分页查询数据的需求。这个示例基于AngularJS 1.0版本，并且实际调用了真实接口的数据。
让我们了解AngularJS自定义指令的基本概念。自定义指令是AngularJS提供的一种强大特性，它允许我们扩展HTML，创建新的元素或属性，用于封装复杂的行为或DOM操作。在这个案例中，我们创建了一个名为`page-directive`的自定义指令，专门用于实现分页功能。
在实现分页功能时，我们需要考虑以下几个关键部分：
1. **分页配置（Page Config）**：
在`ListCtrl.js`中，我们需要定义分页配置对象，包含如当前页数、总页数、每页条目数等信息。例如：
```javascript
$scope.pageConfig = {
currentPage: 1,
totalPages: 0,
itemsPerPage: 10,
url: 'your-api-url'
};
```
这个配置将传递给我们的自定义指令`page-directive`。
2. **数据获取**：
使用`$http`服务或者其他的HTTP库（如jQuery的`$.ajax`）来从服务器获取分页数据。在`ListCtrl.js`中，你需要根据`pageConfig.currentPage`和`pageConfig.itemsPerPage`来动态构建请求参数，然后发送GET请求。获取到数据后，更新`listData`数组。
3. **自定义指令（pageDirective.js）**：
- `link`函数：这是自定义指令的核心，负责处理DOM操作和逻辑。在这里，你可以监听`pageConfig`的变化，根据当前页数重新渲染分页按钮。
- `template`或`templateUrl`：定义分页组件的HTML模板，通常包括“上一页”、“下一页”按钮以及页码列表。
- `scope`：定义指令的隔离作用域，接收`pageConfig`作为参数，这样可以方便地与父控制器进行数据交互。
4. **模板（views/list.html）**：
在HTML中，我们需要将自定义指令``插入到适当的位置，这样它就能根据`pageConfig`动态显示分页按钮。同时，`ng-repeat`指令用于遍历`listData`并展示数据。
5. **事件处理**：
在自定义指令中，我们可以添加点击事件监听器，当用户点击“上一页”、“下一页”或页码时，更新`pageConfig.currentPage`，并触发数据重新加载。
6. **分页样式**：
可以通过CSS（如`styles.css`）对分页组件进行样式定制，使其符合项目的视觉要求。
通过以上步骤，我们便能构建一个完整的分页插件。这个插件不仅易于维护，还可以在不同的项目中复用，大大提高了开发效率。记住，自定义指令是AngularJS的强大工具之一，能够帮助我们创建可重用、模块化的组件，让代码更加清晰和高效。在实际开发中，根据项目需求调整和优化这个示例，以实现最佳性能和用户体验。
本源码包内暂不包含可直接显示的源代码文件，请下载源码包。
