Angularjs自定義指令實現分頁插件(DEMO)

來源：懂視網責編：小采時間：2020-11-27 22:29:49

Angularjs自定義指令實現分頁插件(DEMO)

Angularjs自定義指令實現分頁插件(DEMO):由于最近的一個項目使用的是angularjs1.0的版本，涉及到分頁查詢數據的功能，后來自己就用自定義指令實現了該功能。現在單獨做了個簡易的小demo，主要是為了分享自己寫的分頁功能。注：本實例調用的是真實接口數據。首先、小demo的目錄結構如下：一、代

推薦度：

點擊下載本文 文檔為doc格式

導讀Angularjs自定義指令實現分頁插件(DEMO):由于最近的一個項目使用的是angularjs1.0的版本，涉及到分頁查詢數據的功能，后來自己就用自定義指令實現了該功能。現在單獨做了個簡易的小demo，主要是為了分享自己寫的分頁功能。注：本實例調用的是真實接口數據。首先、小demo的目錄結構如下：一、代

由于最近的一個項目使用的是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="lib/jquery.js"></script>-->
 <script src="lib/angular.js"></script>
 <script src="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 style="width: 100%;height: 50px;background-color: #ddd;">頂部區域</div>
 <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>
 <div class="main" ui-view="main"></div>
<script src="scripts/app.js"></script>
<script src="scripts/router.js"></script>
<script src="scripts/controllers/MenuCtrl.js"></script>
<script src="scripts/controllers/ListCtrl.js"></script>
<script src="scripts/controllers/HomeCtrl.js"></script>
<script src="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}}" rel="external nofollow" 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 class="page" style="width: 100%;height: 50px;line-height: 50px;">
 <div class="page-l" id="page_l" style="float: left;">
 <span>總共 <span id="total_count">{{pageConfig.totalCount}}</span> 條</span>
 <div style="display: inline-block;margin-left: 20px;">
 <span>每頁顯示</span>
 <select id="page_size">
 <option value="10">10</option>
 <option value="20">20</option>
 <option value="50">50</option>
 <option value="100">100</option>
 </select>條
 </div>
 </div>
 <div class="page-r">
 <ul id="page_ul" class="page-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

angular.module('app.C').controller('MenuCtrl', ['$scope', '$state',
 function ($scope, $state) {
 $scope.goState = function (url,params) {
 if(!url) {
 $state.go('home')
 }else{
 if(params){
 $state.go(url,params)
 }else{
 $state.go(url)
 }
 }
 }
 }
])

8、scripts/controllers/HomeCtrl.js

angular.module('app.C').controller('HomeCtrl',['$scope', 'global',
 function ($scope, global) {
 $scope.url = global.url; //全局變量
 }
])
9、scripts/controllers/ListCtrl.js （重要部分，列表數據的controller部分）

angular.module('app.C').controller('ListCtrl', ['$scope', '$http',
 function ($scope, $http) {
 //初始化數據
 //分頁參數（參數名固定不可變）
 $scope.pageConfig = {
 // pageSize:10, //每頁條數（不設置時，默認為10）
 pageIndex:1, //當前頁碼
 totalCount:0, //總記錄數
 totalPage:0, //總頁碼
 prevPage:'< 上一頁', //上一頁（不設置時，默認為：<）
 nextPage:'下一頁 >', //下一頁（不設置時，默認為：>）
 firstPage:'<< 首頁', //首頁（不設置時，默認為：<<）
 lastPage:'末頁 >>', //末頁（不設置時，默認為：>>）
 degeCount:3, //當前頁前后兩邊可顯示的頁碼個數（不設置時，默認為3）
 isShowEllipsis:true //是否顯示省略號不可點擊按鈕（true：顯示，false：不顯示）
 }
 $scope.listData = []; //列表數據
 //請求接口的參數（參數名根據接口文檔確定）
 $scope.params = {
 page: $scope.pageConfig.pageIndex, //當前頁碼
 pageSize: $scope.pageConfig.pageSize, //每頁條數
 course_id: 537
 }
 $scope.getList = function () {
 var promise = $http({
 method:"post",
 url:"http://api.admin.app.mtedu.com/v1/census/course-student-learning-progress",
 params:$scope.params,
 headers:{Authorization:'Bearer newtask2017'},
 }).success(function(res){
 if(res.success){
 $scope.listData = res.data.list;
 $scope.pageConfig.totalCount = res.data.totalCount; //總記錄數
 $scope.pageConfig.totalPage = Math.ceil($scope.pageConfig.totalCount / $scope.pageConfig.pageSize); //總頁數
 console.log('總記錄數：'+$scope.pageConfig.totalCount+'； 總頁數：'+$scope.pageConfig.totalPage+'；當前頁碼：'+$scope.pageConfig.pageIndex);
 $scope.$broadcast("initPage") //調用分頁組件里的初始化頁碼函數
 }else{
 alert('系統錯誤');
 }
 }).error(function(data){
 alert('系統錯誤');
 })
 }
 $scope.getList()
 //監聽分頁組件中的分頁點擊事件
 $scope.$on("clickPage", function(e, m) {
 $scope.params.page = $scope.pageConfig.pageIndex;
 $scope.params.pageSize = $scope.pageConfig.pageSize;
 console.log('pageSize='+$scope.params.pageSize);
 $scope.getList();
 })
 }
])

10、scripts/directive/pageDirective.js （重要部分，自定義指令的js部分）

angular.module('app.D').directive('pageDirective',['$rootScope',
 function ($rootScope) {
 var link = function (scope,elem,attr) {
 scope.pageConfig.pageIndex; //當前頁碼
 scope.pageConfig.totalPage; //總頁數
 scope.pageConfig.totalCount; //總記錄數
 scope.pageConfig.pageSize = scope.pageConfig.pageSize || 10; //每頁條數
 var prev = scope.pageConfig.prevPage || '<'; //上一頁文字
 var next = scope.pageConfig.nextPage || '>'; //下一頁文字
 var first = scope.pageConfig.firstPage || '<<'; //首頁文字
 var last = scope.pageConfig.lastPage || '>>'; //末頁文字
 var degeCount = scope.pageConfig.degeCount || 3; //當前頁碼兩邊的頁碼個數（默認：3）
 var isShowEllipsis = scope.pageConfig.isShowEllipsis; //是否顯示省略號不可點擊按鈕
 var ellipsisBtn = isShowEllipsis ? '<li><span class="ellipsis">...</span></li>' : '';
 //監聽父作用域列表數據獲取成功后
 scope.$on("initPage", function(e, m) {
 initPage(scope.pageConfig.totalPage, scope.pageConfig.pageIndex, degeCount)
 });
 function initPage(totalPage, pageIndex, degeCount) {
 var pageHtml = '';
 var tmpHtmlPrev = '';
 var tmpHtmlNext = '';
 if(pageIndex - degeCount >= degeCount-1 && totalPage - pageIndex >= degeCount+1){ //前后都需要
 var count = degeCount; //前后各自需要顯示的頁碼個數
 for(var i=0; i<count; i++){
 if(pageIndex != 1){
 tmpHtmlPrev += '<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-number">'+(pageIndex-(count-i))+'</a></li>';
 }
 tmpHtmlNext += '<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-number">'+((pageIndex-0)+i+1)+'</a></li>';
 }
 pageHtml = '<li><a id="first_page" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+first+'</a></li>'+
 '<li><a id="prev_page" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+prev+'</a></li>'+
 ellipsisBtn+
 tmpHtmlPrev +
 '<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="active">'+pageIndex+'</a></li>'+
 tmpHtmlNext +
 ellipsisBtn+
 '<li><a id="next_page" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+next+'</a></li>'+
 '<li><a id="last_page" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+last+'</a></li>';
 }else if(pageIndex - degeCount >= degeCount-1 && totalPage - pageIndex < degeCount+1) { //前需要，后不需要
 var count = degeCount; //前需要顯示的頁碼個數
 var countNext = totalPage - pageIndex; //后需要顯示的頁碼個數
 if(pageIndex != 1){
 for(var i=0; i<count; i++){
 tmpHtmlPrev += '<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-number">'+(pageIndex-(count-i))+'</a></li>';
 }
 }
 for(var i=0; i<countNext; i++){
 tmpHtmlNext += '<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-number">'+((pageIndex-0)+i+1)+'</a></li>';
 }
 pageHtml = '<li><a id="first_page" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+first+'</a></li>'+
 '<li><a id="prev_page" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+prev+'</a></li>'+
 ellipsisBtn+
 tmpHtmlPrev +
 '<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="active">'+pageIndex+'</a></li>'+
 tmpHtmlNext +
 '<li><a id="next_page" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+next+'</a></li>'+
 '<li><a id="last_page" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+last+'</a></li>';
 }else if(pageIndex - degeCount < degeCount-1 && totalPage - pageIndex >= degeCount+1){ //前不需要，后需要
 var countPrev = pageIndex - 1; //前需要顯示的頁碼個數
 var count = degeCount; //后需要顯示的頁碼個數
 if(pageIndex != 1){
 for(var i=0; i<countPrev; i++){
 tmpHtmlPrev += '<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-number">'+(pageIndex-(countPrev-i))+'</a></li>';
 }
 }
 for(var i=0; i<count; i++){
 tmpHtmlNext += '<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-number">'+((pageIndex-0)+i+1)+'</a></li>';
 }
 pageHtml = '<li><a id="first_page" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+first+'</a></li>'+
 '<li><a id="prev_page" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+prev+'</a></li>'+
 tmpHtmlPrev +
 '<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="active">'+pageIndex+'</a></li>'+
 tmpHtmlNext +
 ellipsisBtn+
 '<li><a id="next_page" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+next+'</a></li>'+
 '<li><a id="last_page" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+last+'</a></li>';
 }else if(pageIndex - degeCount < degeCount-1 && totalPage - pageIndex < degeCount+1){ //前后都不需要
 var countPrev = pageIndex - 1; //前需要顯示的頁碼個數
 var countNext = totalPage - pageIndex; //后需要顯示的頁碼個數
 if(pageIndex != 1){
 for(var i=0; i<countPrev; i++){
 tmpHtmlPrev += '<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-number">'+(pageIndex-(countPrev-i))+'</a></li>';
 }
 }
 for(var i=0; i<countNext; i++){
 tmpHtmlNext += '<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-number">'+((pageIndex-0)+i+1)+'</a></li>';
 }
 pageHtml = '<li><a id="first_page" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+first+'</a></li>'+
 '<li><a id="prev_page" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+prev+'</a></li>'+
 tmpHtmlPrev +
 '<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="active">'+pageIndex+'</a></li>'+
 tmpHtmlNext +
 '<li><a id="next_page" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+next+'</a></li>'+
 '<li><a id="last_page" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+last+'</a></li>';
 }
 document.getElementById('page_ul').innerHTML = pageHtml;
 }
 /*點擊頁碼（首頁、上一頁、下一頁、末頁）*/
 document.getElementById('page_ul').addEventListener('click', function (e) {
 console.log(456);
 var _this = e.target; //當前被點擊的a標簽
 var idAttr = _this.id; //id屬性
 var className = _this.className; //class屬性
 if(idAttr == 'first_page'){ //如果是點擊的首頁
 scope.pageConfig.pageIndex = 1;
 }else if(idAttr == 'prev_page'){ //如果點擊的是上一頁
 scope.pageConfig.pageIndex = scope.pageConfig.pageIndex == 1 ? scope.pageConfig.pageIndex : scope.pageConfig.pageIndex - 1 ;
 }else if(idAttr == 'next_page'){ //如果點擊的是下一頁
 scope.pageConfig.pageIndex = scope.pageConfig.pageIndex == scope.pageConfig.totalPage ? scope.pageConfig.pageIndex : parseInt(scope.pageConfig.pageIndex) + 1;
 }else if(idAttr == 'last_page'){ //如果點擊的是末頁
 scope.pageConfig.pageIndex = scope.pageConfig.totalPage;
 }else if(className == 'page-number'){ //如果點擊的是數字頁碼
 scope.pageConfig.pageIndex = _this.innerText;
 }
 initPage(scope.pageConfig.totalPage, scope.pageConfig.pageIndex, degeCount);
 scope.$emit('clickPage');
 });
 /*改變每頁條數*/
 document.getElementById('page_size').addEventListener('change', function () {
 var _this = this;
 scope.pageConfig.pageIndex = 1;
 scope.pageConfig.pageSize = _this.value - 0;
 initPage(scope.pageConfig.totalPage, scope.pageConfig.pageIndex, degeCount);
 scope.$emit('clickPage');
 })
 /////////////////////////// 以下注釋部分是用jQuery寫的點擊頁碼部分 /////////////////////////////
 /*點擊數字頁*/
 // $('#page_ul').on('click','a',function () {
 // var _this = $(this);
 // scope.pageConfig.pageIndex = _this.text();
 // initPage(scope.pageConfig.totalPage, scope.pageConfig.pageIndex, degeCount)
 // scope.$emit('clickPage')
 // });
 /*點擊首頁*/
 // $('#page_ul').on('click','#first_page',function () {
 // var _this = $(this);
 // scope.pageConfig.pageIndex = 1;
 // initPage(scope.pageConfig.totalPage, scope.pageConfig.pageIndex, degeCount)
 // scope.$emit('clickPage')
 // });
 // /*點擊上一頁*/
 // $('#page_ul').on('click','#prev_page',function () {
 // var _this = $(this);
 // scope.pageConfig.pageIndex = scope.pageConfig.pageIndex == 1 ? scope.pageConfig.pageIndex : scope.pageConfig.pageIndex - 1 ;
 // initPage(scope.pageConfig.totalPage, scope.pageConfig.pageIndex, degeCount)
 // scope.$emit('clickPage')
 // });
 // /*點擊下一頁*/
 // $('#page_ul').on('click','#next_page',function () {
 // var _this = $(this);
 // scope.pageConfig.pageIndex = scope.pageConfig.pageIndex == scope.pageConfig.totalPage ? scope.pageConfig.pageIndex : parseInt(scope.pageConfig.pageIndex) + 1;
 // initPage(scope.pageConfig.totalPage, scope.pageConfig.pageIndex, degeCount)
 // scope.$emit('clickPage')
 // });
 // /*點擊尾頁*/
 // $('#page_ul').on('click','#last_page',function () {
 // var _this = $(this);
 // scope.pageConfig.pageIndex = scope.pageConfig.totalPage;
 // initPage(scope.pageConfig.totalPage, scope.pageConfig.pageIndex, degeCount)
 // scope.$emit('clickPage')
 // });
 /*改變每頁條數*/
 // $('.page-l').on('change', '#page_size',function () {
 // var _this = $(this);
 // scope.pageConfig.pageIndex = 1;
 // scope.pageConfig.pageSize = _this.val()-0;
 // initPage(scope.pageConfig.totalPage, scope.pageConfig.pageIndex, degeCount)
 // scope.$emit('clickPage')
 // });
 };
 return {
 restrict: 'EA',
 'scope':{
 'pageConfig':'=',
 },
 templateUrl: 'views/directive/page-directive.html',
 link: link
 };
 }
])

二、效果