AngularJS directive 实现分页包装指令

来源：互联网发布：php 接口签名验证编辑：程序博客网时间：2024/06/18 08:22

AngularJS directive 分页指令

写这篇文章的主要目的是为了记录自己的学习过程，方便以后查看，当然也希望有人指点一二，互相学习。

一些angularjs directive的基础知识就不说了，直接上代码。

首先是myPagination.html

myPagination.html

<div>    <nav class="pull-right">        <ul class="pagination pagination-sm">            <li ng-class="{true:'active'}[pageObject.currentPage==1]">                <a href="javascript:void(0)" ng-click="showFirstPage(1)">&laquo;</a>            </li>            <li ng-class="{true:'disabled'}[pageObject.currentPage==1]">                <a href="javascript:void(0);" ng-click="upPageClick(pageObject.currentPage-1)">&lsaquo;</a>            </li>            <li ng-repeat="page in pageObject.pages" ng-class="{true:'active',false:'inactive'}[pageObject.currentPage==page]">                <a href="javascript:void(0);" ng-click="showCurrentPage(page)">{{page}}</a>            </li>            <li ng-class="{true:'disabled'}[pageObject.currentPage==pageObject.totalPage]">                <a href="javascript:void(0);" ng-click="downPageClick(pageObject.currentPage+1)">&rsaquo;</a>            </li>            <li ng-class="{true:'active'}[pageObject.currentPage==pageObject.totalPage]">                <a href="javascript:void(0)" ng-click="showLastPage(pageObject.totalPage)">&raquo;</a>            </li>        </ul>    </nav></div>

diretive 内容

myPagination.js

    angular.module.factory('myPaginationService',function(){            var getPageData = function(pageObject,page){                pageObject.currentPage = page;                if (pageObject.currentPage > 1 && pageObject.currentPage < pageObject.totalPage) {                     pageObject.pages = [                         pageObject.currentPage - 1,                         pageObject.currentPage,                         pageObject.currentPage + 1                     ];                } else if (pageObject.currentPage == 1 && pageObject.totalPage == 1) {                    pageObject.pages = [                        1                    ];                } else if (pageObject.currentPage == 1 && pageObject.totalPage == 2) {                    pageObject.pages = [                        1,2                    ];                } else if (pageObject.currentPage == 1 && pageObject.totalPage > 2) {                    pageObject.pages = [                        pageObject.currentPage,                        pageObject.currentPage + 1,                        pageObject.currentPage + 2                    ];                } else if (pageObject.currentPage == pageObject.totalPage && pageObject.totalPage == 1) {                    pageObject.pages = [                        1                    ];                } else if (pageObject.currentPage == pageObject.totalPage && pageObject.totalPage == 2) {                    pageObject.pages = [                        1,2                    ];                } else if (pageObject.currentPage == pageObject.totalPage && pageObject.totalPage > 2) {                    pageObject.pages = [                        pageObject.currentPage - 2,                        pageObject.currentPage - 1,                        pageObject.currentPage                    ];                }            };            var service = {                upPageClick: function(pageObject,page){                    if(pageObject.currentPage == 1){                        return;                    };                    pageObject.currentPage --;                    getPageData(pageObject,page);                },                downPageClick: function(pageObject,page){                    if(pageObject.currentPage >= pageObject.totalPage){                        return;                    };                    pageObject.currentPage ++;                    getPageData(pageObject,page);                },                showFirstPageContent: function(pageObject,page){                    pageObject.currentPage = 1;                    getPageData(pageObject,page);                },                showLastPageContent: function(pageObject,page){                    pageObject.currentPage = pageObject.totalPage;                    getPageData(pageObject,page);                },                showCurrentPageContent: function(pageObject,page){                    pageObject.currentPage = page;                    getPageData(pageObject,page);                }            };            return service;    });    angular.module.directive('myPagination',function(myPaginationService){        return {            restrict: 'A',            replace: true,            scope: {                pageObject:'='            },            templateUrl: 'myPagination.html',            link: function(scope,element,attrs){                scope.upPageClick = function(page){                    myPaginationService.upPageClick(scope.pageObject,page);                    //console.log(scope.pageObject.currentPage);                };                scope.downPageClick = function(page){                    myPaginationService.downPageClick(scope.pageObject,page);                    //console.log(scope.pageObject.currentPage);                };                scope.showFirstPage = function(page){                    myPaginationService.showFirstPageContent(scope.pageObject,page);                    //console.log(scope.pageObject.currentPage);                };                scope.showLastPage = function(page){                    myPaginationService.showLastPageContent(scope.pageObject,page);                    console.log(scope.pageObject.currentPage);                };                scope.showCurrentPage = function(page){                    myPaginationService.showCurrentPageContent(scope.pageObject,page);                    //console.log(scope.pageObject.currentPage);                };            }        };    });})

前台页面调用

<div my-pagination page-object="userPageObject"></div>

与Java后台交互

        //查询用户，并分页显示          $scope.userPageObject={                currentPageList: [], //当前页面显示的数据列表                currentPage: 1, //当前页，初始化为1                totalPage: 0, //总页数                pageSize: 10, //页面大小                pages:[] //前台页面按钮显示内容          };          $scope.userSelect = {};          $scope.getAllUser=function(){              $scope.userSearch = {                  params:{                      pageSize:$scope.userPageObject.pageSize,                      currentPage:$scope.userPageObject.currentPage,                  }              };              $http.get("/api/user",$scope.userSearch).success(function(data,status,headers){                  $scope.userPageObject.totalPage = headers('Page-Count');                                    $scope.userPageObject.currentPageList=data;              }).error(function(err){                  $scope.users=[];                  console.log(err);              });          };          $scope.getAllUser();          $scope.init = function(){              $scope.getAllUser();              $scope.$watch('userPageObject.totalPage',function(){myPaginationService.showFirstPageContent($scope.userPageObject,1);});          };          $scope.init();          $scope.$watch('userPageObject.currentPage',function(){$scope.getAllUser();});    })});

0 0