AngularJS directive 分页,待续...

简单写了一点分页的功能，没有注释没有完成啥都没有，只是写了一下思路..待续

<!DOCTYPE html>
<html data-ng-app="myPage">
<head>
    <title></title>
    <script src="../js/angular.min.js"></script>
</head>
<body data-ng-controller="myPageController">
<div page data-items-source="itemsSource" data-page-size="pageSize" data-current-page="currentPage"></div>
</body>
<script>
    var myPage = angular.module('myPage', []);
    myPage.controller('myPageController', function ($scope) {
        $scope.itemsSource = [
            {
                Id: 1,
                name: 'Jackey1'
            },
            {
                Id: 2,
                name: 'Jackey2'
            },
            {
                Id: 3,
                name: 'Jackey3'
            },
            {
                Id: 4,
                name: 'Jackey4'
            },
            {
                Id: 5,
                name: 'Jackey5'
            },
            {
                Id: 6,
                name: 'Jackey6'
            },
            {
                Id: 7,
                name: 'Jackey7'
            },
            {
                Id: 8,
                name: 'Jackey8'
            },
            {
                Id: 9,
                name: 'Jackey9'
            },
            {
                Id: 10,
                name: 'Jackey10'
            },
            {
                Id: 11,
                name: 'Jackey11'
            },
            {
                Id: 12,
                name: 'Jackey12'
            },
            {
                Id: 13,
                name: 'Jackey13'
            },
            {
                Id: 14,
                name: 'Jackey14'
            },
            {
                Id: 15,
                name: 'Jackey15'
            },
            {
                Id: 16,
                name: 'Jackey8'
            }
        ];
        $scope.pageSize = 5;
        $scope.currentPage = 1;
    });
    myPage.directive('page', function () {
        return {
            restrict: 'A',
            templateUrl: 'template/page.html',
            scope: {
                itemsSource: '=',
                pageSize: '=',
                currentPage: '='
            },
            controller: function ($scope) {
                $scope.getPageNum = function () {
                    var pageNum = 0, temp = 0;
                    temp = $scope.itemsSource.length % $scope.pageSize;
                    if (temp === 0) {
                        pageNum = Math.round($scope.itemsSource.length / $scope.pageSize);
                    } else {
                        pageNum = Math.round($scope.itemsSource.length / $scope.pageSize) + 1;
                    }
                    return pageNum;
                };
                $scope.getPageShowArray = function (currenPage, len) {
                    var result = [];
                    if (currenPage - 1 === 0) {
                        var resultLen = len > $scope.pageNum ? $scope.pageNum : len;
                        for (var i = 0; i < resultLen; i++) {
                            result.push(i + 1);
                        }
                    } else {
                        var resultLen = len > $scope.pageNum ? $scope.pageNum : len;
                        for (var i = 0; i < resultLen; i++) {
                            result.push(currenPage - 1 + i);
                        }
                    }
                    return result;
                };
                $scope.showPage = function (Id) {
                    $scope.currentPage = Id;
                    var start = (Id - 1) * $scope.pageSize;
                    var end = Id * $scope.pageSize;
                    $scope.showItems = $scope.itemsSource.slice(start, end);
                    console.log($scope.showItems);
                };
                $scope.prevClick=function () {
                    var Id = ($scope.currentPage - 1) == 0 ? 1 : $scope.currentPage - 1;
                    $scope.showPage(Id);
                };
                $scope.nextClick = function () {
                    var Id = $scope.currentPage + 1 > $scope.pageNum ? $scope.pageNum : $scope.currentPage + 1;
                    $scope.showPage(Id);
                };
            },
            link: function (scope, element, attr) {
                scope.pageNum = scope.getPageNum();
                scope.pageBoxArray = scope.getPageShowArray(scope.currentPage, 5);
            }
        };
    });

</script>
<style>
    .page {
        width: auto;
        height: 30px;
        overflow: hidden;
    }

    .pageBox {
        width: 20px;
        height: 20px;
        border: 1px solid gray;
        line-height: 20px;
        text-align: center;
        float: left;
        margin-left: 15px;
        cursor: pointer;
    }

    .pageBox:hover {
        background: yellow;;
    }

    .prevBtn {
        width: 50px;
        height: : 20 px;
        float: left;
        cursor: pointer;
        border: 1px solid gray;
        text-align: center;
        line-height: 20px;
    }

    .nextBtn {
        width: 50px;
        height: 20px;
        float: left;
        cursor: pointer;
        border: 1px solid gray;
        margin-left: 10px;
        text-align: center;
        line-height: 20px;
    }
</style>
</html>

templateUrl

<div class="page">
<div class="prevBtn" data-ng-click="prevClick()">prev</div>
<div class="pageBox" data-ng-repeat="item in pageBoxArray" data-ng-click="showPage(item)">{{item}}</div>
<div class="nextBtn" data-ng-click="nextClick()">next</div>
    </div>

后期想实现的功能是，直接给page的directive数据源和需要显示的条数，directive提供接口返回当前页的数据，然后再把数据给另外一个显示数据的direcive绑定到模板上...

相关阅读:
5分钟速成C++14多线程编程
 Vue+element UI穿梭框使用
 element后台项目列表删除最后一项显示无数据
 vue+element 列表一列条件渲染
 百分比布局实现div自动换行
 store.js（一款好用的本地存储插件）的使用
 Vue开发h5或者小程序由px转换rem
Vue中使用android和ios手机打开相机并选择相册功能和图片旋转问题
 js正则表达身份证姓名和身份证号码
 Vue中h5三个下拉框实现省级联动
原文地址：https://www.cnblogs.com/lihaozhou/p/3928336.html