自定义指令

import angular from 'angular';/** * @ngdoc module * @name components.page * @description 分页directive */export default angular.module('pageDirective', []).directive('ngPage', function () {    return {        restrict: 'E',        scope: {            totalCount: '=',            pageSize: '=',            param: '=',            pageItmes: '=',            currentPage: '=',            goPage: '&',            showMaxPage: '@',            GO: '@'        },        controller: controller,        template: templateFunction    }    function controller($scope, $element, $attrs) {        var size = 0;        $scope.$watch('pageSize', function (nvalue, ovalue) {            size = parseInt(nvalue);            if (typeof(ovalue) !== 'undefined') {                $scope.currentPage = parseInt(($scope.currentPage - 1) * Number(ovalue) / size) + 1;            }            $scope.totalPage = getTotalPages();        });        //计算总页数        var getTotalPages = function () {            return Math.ceil($scope.totalCount / size);        };        //监控总记录条数是否发生变化，如改变，需要重新计算页数        $scope.$watch('totalCount', function () {            $scope.totalPage = getTotalPages();            if ($scope.totalPage == undefined || isNaN($scope.totalPage)) {                $scope.totalPage = 1            }        });        //监控总页数，调整展示页码        $scope.$watch('totalPage', function () {            $scope.pages = getPages($scope.totalPage, $scope.currentPage);        });        //监控跳转的页数只能为数字        $scope.$watch('GO', function () {            var re = /[^\d]/g;            if ($scope.GO !== '' && !re.test($scope.GO) && $scope.GO > 0) {                $scope.pages = getPages($scope.totalPage, $scope.currentPage);            } else {                $scope.GO = '';            }        });        //监控当前页，然后调整展示页码        $scope.$watch('currentPage', function () {            // debugger;            $scope.pages = getPages($scope.totalPage, $scope.currentPage);        });        //跳转到某一页        $scope.setCurrentPage = function (pageno) {            if (pageno === '...' || pageno === 0 || pageno > $scope.totalPage || pageno === '') {                return;            }            $scope.currentPage = pageno;            $scope.param.page.currentPage = pageno;            $scope.goPage($scope.param);            $scope.GO = '';        };        //每页显示size改变        $scope.changeSize = function () {            $scope.param.page = {                currentPage: 1,                pageSize: $scope.pageSize            };            $scope.goPage($scope.param);        };        var getPages = function (totalPage, currentPage) {            var pages = [];            currentPage = parseInt(currentPage);            totalPage = parseInt(totalPage);            if (totalPage === 0) {                pages.push(1);            }            //总页数
     <最大展示页数：展示全部 else if (totalpage <="totalPage;" { for (var i i++) pages.push(i); } 当前页靠近首页前4页，显示：首页前4页，..., 尾页后2页>
       $attrs.showMaxPage && currentPage <= 4) {                pages.push(1);                pages.push(2);                pages.push(3);                pages.push(4);                pages.push("...");                pages.push(totalPage - 1);                pages.push(totalPage);            }            // 当前页靠近尾页后4页，显示            else if (totalPage > $attrs.showMaxPage && (totalPage - currentPage) < 4) {                pages.push(1);                pages.push(2);                pages.push("...");                pages.push(totalPage - 3);                pages.push(totalPage - 2);                pages.push(totalPage - 1);                pages.push(totalPage);            }            //当前页既不靠近首页前4页也不靠近尾页后4页，            else {                pages.push(1);                pages.push(2);                pages.push("...");                pages.push(currentPage - 1);                pages.push(currentPage);                pages.push(currentPage + 1);                pages.push("...");                pages.push(totalPage);            }            return pages;        };    }    function templateFunction() {        return '
      
       ' +            '
       
        ' +            '
        
«
' +            '
        
' +            '{
   {pageno}}
' +            '
        
»
' +            '
        
每页' +            '' + '' +            '
' +            '
        
' +            '
        
GO
' +            '
       
' +            '
      
'            ;    }}).name;
     

页面中调用

页面中获取数据的方法是queryList，go-page的时候把currentpage作为传递过去即可发送请求，取得想要的结果。

controller中需要传入初始化的数据

//初始化分页信息$scope.param = {   selectCount: [5, 10, 15],      page: {         currentPage: 1,          pageSize: 5      }};