由于最近的一个项目使用的是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</title> <!--<script src="https://www.jb51.net/lib/jquery.js"></script>--> <script src="https://www.jb51.net/lib/angular.js"></script> <script src="https://www.jb51.net/lib/angular-ui-router.js"></script> <style> * { margin: 0; padding: 0; } .left-menu { width: 200px; float: left; height: 100%; } .left-menu ul { list-style: none; } .left-menu ul li { height: 40px; line-height: 40px; background-color: #777; color: #ddd; margin-bottom: 5px; cursor: pointer; } .main { margin-left: 200px; padding: 10px; } .left-menu ul li.active { background-color: #333; color: #fff; } </style> </head> <body> <div>顶部区域</div> <div ng-controller="MenuCtrl"> <ul> <li ng-click="goState('home')" ng-class="{active:curUrl == '/home'}">首页</li> <li ng-click="goState('list')" ng-class="{active:curUrl == '/list'}">列表</li> </ul> </div> <div ui-view="main"></div> <script src="https://www.jb51.net/scripts/app.js"></script> <script src="https://www.jb51.net/scripts/router.js"></script> <script src="https://www.jb51.net/scripts/controllers/MenuCtrl.js"></script> <script src="https://www.jb51.net/scripts/controllers/ListCtrl.js"></script> <script src="https://www.jb51.net/scripts/controllers/HomeCtrl.js"></script> <script src="https://www.jb51.net/scripts/directive/pageDirective.js"></script> </body> </html>
2、views/list.html （重要，列表数据的html部分）
<style> table { border: 1px solid #000; border-collapse: collapse; width: 100%; } table th,table td { border: 1px solid #000; text-align: center; height: 30px; } </style> <table> <thead> <th>ID</th> <th>昵称</th> <th>创建时间</th> </thead> <tbody> <tr ng-repeat="item in listData"> <td>{{item.id}}</td> <td>{{item.nickname}}</td> <td>{{item.create_time}}</td> </tr> </tbody> </table> <div> <!--分页指令--> <div page-directive page-config="pageConfig"></div> </div>
3、views/home.html
<div>首页区域</div> <a ng-href="{{url}}" target="_self">百度</a>
4、views/directive/page-directive.html （重要，自定义指令的html部分）
<style> .page {font-size: 14px;background-color: transparent;} .page .page-l select {width: 60px;height: 30px;} .page .page-r {float: right;padding-top: 10px;} .page .page-r ul {float: left;list-style: none;margin: 0;height: 30px;box-sizing: border-box;} .page .page-r ul li {float: left;list-style: none;height: 100%;line-height: 30px;border: 1px solid #ccc;border-right: 0 none;box-sizing: border-box;} .page .page-r ul li:hover {background-color: #e2e2e2;} .page .page-r ul li:last-child {border-right: 1px solid #ccc;} .page .page-r ul li a {text-decoration: none;display: block;height: 100%;padding:0 10px; color: #2A6496;} .page .page-r ul li a.active {background-color: #428BCA;color: #fff;} .page .page-r ul li span {display: block;height: 100%;padding:0 10px; color: #2A6496;cursor: pointer;} .page .page-r ul li span.ellipsis {cursor: default;} </style> <div> <div> <span>总共 <span>{{pageConfig.totalCount}}</span> 条</span> <div> <span>每页显示</span> <select> <option value="10">10</option> <option value="20">20</option> <option value="50">50</option> <option value="100">100</option> </select>条 </div> </div> <div> <ul></ul> </div> </div>
5、scripts/app.js
angular.module('app', ['ui.router', 'app.C', 'app.S', 'app.D']) .constant('global',{ //定义全局变量 url:'http://www.baidu.com' }); angular.module('app.C', []); angular.module('app.S', []); angular.module('app.D', []);
6、scripts/router.js （路由配置）
var app = angular.module('app').config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise('/home'); //如果没有匹配到，则就让其匹配home $stateProvider .state('home',{ url:'/home', views:{ 'main':{ templateUrl:'views/home.html', controller:'HomeCtrl' } } }) .state('list',{ url:'/list', views:{ 'main':{ templateUrl:'views/list.html', controller:'ListCtrl' } } }) } ]).run(['$rootScope', '$state', function ($rootScope, $state) { $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) { console.log($state.current.url); $rootScope.curUrl = $state.current.url; }) } ])
7、scripts/controllers/MenuCtrl.js