由于最近的一个项目使用的是angularjs1.0的版本，涉及到分页查询数据的功能，后来自己就用自定义指令实现了该功能。现在单独做了个简易的小演示，主要是为了分享自己写的分页功能。注：本实例调用的是真实接口数据。

首先、小演示的目录结构如下：

一、代码部分

下面直接把每一个文件的代码贴出来，重点是ListCtrl.js和pageDirective.js:

1、index.html

！DOCTYPE html html lang=' en ' ng-app=' app ' ng-斗篷头元字符集='UTF-8 '标题/标题！-script src=' http : lib/jquery。js '/script-script src=' http : lib/angular。js '/script script src=' http : lib/angular-ui-router。js '/脚本样式* { margin 3360 0 0padd : 0；} .左侧菜单{宽度： 200像素向左浮动：高度： 100%;} .左菜单ul {列表式：无；} .左侧菜单ul li { height: 40px线高： 40px背景色： # 777;color: # ddd边距-底部： 5px光标：指针；} .主{左边距： 200 pxpadding: 10px }。左菜单ul Li。活动{底色： # 333；color : # fff }/style/head body div style=' width : 100%；高度： 50px背景-颜色： # DDD；'顶部区域/div class=' left-menu ' 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 class=' main ' ui-view=' main '/div脚本src=' http :脚本/app。js '/脚本脚本src=' http :脚本/路由器。js '/script script src=' http : script/controllers/menu ctrl。js '/script script src=' http : script/controller/list ctrl。js '/脚本脚本src=' http :脚本/控制器/homectr重要，列表数据的超文本标记语言部分)

样式表{ border: 1px固体# 000边界崩溃：崩溃；宽度： 100%;}表呃，表td { border: 1px固体# 000文本对齐：中心；高度： 30p