基于angular的分页组件插件，使用directive，将directive的内容放到js文件中，直接引用即可

angular.module(‘angular.pagination‘, []).directive(‘tmPagination‘, [function () {
    return {
        restrict: ‘EA‘,
        template: ‘

‘ +
        ‘
‘ +
        ‘
首页‘ +
        ‘
上一页‘ +
        ‘

‘ +
        ‘ng-click="changeCurrentPage(item)">‘ +
        ‘{{ item }}‘ +
        ‘
‘ +
        ‘
下一页‘ +
        ‘
尾页‘ +
        ‘
跳转至‘+
        ‘‘ +
        ‘
暂无数据‘ +
        ‘
‘,
        replace: true,
        scope: {
            conf: ‘=‘
        },
        //link 可以简单理解为，当directive被angular 编译后，执行该方法
        //element简单说就是$(‘my-dialog‘)
        //attrs是个map，内容是你这个directive上的所有属性
        link: function (scope, element, attrs) {
            var conf = scope.conf;
            // 默认分页长度
            var defaultPagesLength = 9;
            // 默认分页选项可调整每页显示的条数
            var defaultPerPageOptions = [10, 15, 20, 30, 50];
            // 默认每页的个数
            var defaultPerPage = 11;
            // 获取分页长度
            if (conf.pagesLength) {
                // 判断一下分页长度
                conf.pagesLength = parseInt(conf.pagesLength, 10);

                if (!conf.pagesLength) {
                    conf.pagesLength = defaultPagesLength;
                }

                // 分页长度必须为奇数，如果传偶数时，自动处理
                if (conf.pagesLength % 2 === 0) {
                    conf.pagesLength += 1;
                }

            } else {
                conf.pagesLength = defaultPagesLength
            }

            // 分页选项可调整每页显示的条数
            if (!conf.perPageOptions) {
                conf.perPageOptions = defaultPagesLength;
            }
            if (!conf.totalItems) {
                conf.totalItems=0;
            }
            // pageList数组
            function getPagination(newValue, oldValue) {

                // conf.currentPage
                if (conf.currentPage) {
                    conf.currentPage = parseInt(scope.conf.currentPage, 10);
                }

                if (!conf.currentPage) {
                    conf.currentPage = 1;
                }

                // conf.totalItems
                if (conf.totalItems) {
                    conf.totalItems = parseInt(conf.totalItems, 10);
                }

                // conf.totalItems
                if (!conf.totalItems) {
                    conf.totalItems = 0;
                    return;
                }

                // conf.itemsPerPage
                if (conf.itemsPerPage) {
                    conf.itemsPerPage = parseInt(conf.itemsPerPage, 10);
                }
                
                if (!conf.itemsPerPage) {
                    conf.itemsPerPage = defaultPerPage;
                }

                // numberOfPages 拿到总页数
                conf.numberOfPages = Math.ceil(conf.totalItems / conf.itemsPerPage);
               

                // 如果分页总数>0，并且当前页大于分页总数
                if (scope.conf.numberOfPages > 0 && scope.conf.currentPage > scope.conf.numberOfPages) {
                    scope.conf.currentPage = scope.conf.numberOfPages;
                }

                // 如果itemsPerPage在不在perPageOptions数组中，就把itemsPerPage加入这个数组中
                var perPageOptionsLength = scope.conf.perPageOptions.length;




                // 页码相关
                scope.pageList = [];
                if (conf.numberOfPages  conf.pagesLength) {
                    // 判断总页数如果小于等于分页的长度，若小于则直接显示
                    for (i = 1; i ) {
                        scope.pageList.push(i);
                    }
                } else {
                    // 总页数大于分页长度（此时分为三种情况：1.左边没有...2.右边没有...3.左右都有...）
                    // 计算中心偏移量
                    var offset = (conf.pagesLength - 1) / 2;
                    if (conf.currentPage  offset) {
                        // 左边没有...
                        for (i = 1; i 1; i++) {
                            scope.pageList.push(i);
                        }
                    } else if (conf.currentPage > conf.numberOfPages - offset) {
                        for (i = offset + 1; i >= 1; i--) {
                            scope.pageList.push(conf.numberOfPages - i);
                        }
                        scope.pageList.push(conf.numberOfPages);
                    } else {
                        // 最后一种情况，两边都有...
                        for (i = Math.ceil(offset / 2); i >= 1; i--) {
                            scope.pageList.push(conf.currentPage - i);
                        }
                        scope.pageList.push(conf.currentPage);
                        for (i = 1; i 2; i++) {
                            scope.pageList.push(conf.currentPage + i);
                        }
                    }
                }
                scope.$parent.conf = conf;
            }

            // prevPage
            scope.prevPage = function () {
                if (conf.currentPage > 1) {
                    conf.currentPage -= 1;
                    getPagination();
                    if (conf.onChange) {
                        conf.onChange();
                    }
                }

            };
            scope.prevIndex = function () {
                if (scope.conf.currentPage > 1) {
                    scope.conf.currentPage = 1;
                    getPagination();
                    if (conf.onChange) {
                        conf.onChange();
                    }
                }

            };
            // nextPage
            scope.nextPage = function () {
                if (conf.currentPage  conf.numberOfPages) {
                    conf.currentPage += 1;
                    getPagination();
                    if (conf.onChange) {
                        conf.onChange();
                    }
                }

            };
            scope.nextBack = function () {
                if (scope.conf.currentPage  scope.conf.numberOfPages) {
                    scope.conf.currentPage = scope.conf.numberOfPages ;
                    getPagination();
                    if (conf.onChange) {
                        conf.onChange();
                    }
                }

            };
            // 变更当前页
            scope.changeCurrentPage = function (item) {

                if (item == ‘...‘) {
                    return;
                } else {
                    conf.currentPage = item;
                    getPagination();
                    // conf.onChange()函数
                    if (conf.onChange) {
                        conf.onChange();
                    }
                }
            };

            // 修改每页展示的条数
            scope.changeItemsPerPage = function () {

                // 一发展示条数变更，当前页将重置为1
                conf.currentPage = 1;

                getPagination();
                // conf.onChange()函数
                if (conf.onChange) {
                    conf.onChange();
                }
            };

            // 跳转页
            scope.jumpToPage = function () {
                num = scope.jumpPageNum;
                if (num.match(/\d+/)) {
                    num = parseInt(num, 10);

                    if (num && num != conf.currentPage) {
                        if (num > conf.numberOfPages) {
                            num = conf.numberOfPages;
                        }

                        // 跳转
                        conf.currentPage = num;
                        getPagination();
                        // conf.onChange()函数
                        if (conf.onChange) {
                            conf.onChange();
                        }
                        scope.jumpPageNum = ‘‘;
                    }
                }

            };

            scope.jumpPageKeyUp = function (e) {
                var keycode = window.event ? e.keyCode : e.which;

                if (keycode == 13) {
                    scope.jumpToPage();
                }
            }

            scope.$watch(‘conf.totalItems‘, function (value, oldValue) {
                // 在无值或值相等的时候，去执行onChange事件
                if (!value || value == oldValue) {
                    if (conf.onChange) {
                        conf.onChange();
                    }
                }
                getPagination();
            })

        }
    };
}]);

 
2.2、用户调用指令的代码：


"en">"UTF-8">
    "stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    "css/pagination.css"  rel="stylesheet" >
    "myApp" ng-controller="testController">
    
class="col-md-9 page-pagination">
    　　"paginationConf">
　　





2.3 关于自定义指令的说明：
2.3.1 restrict参数
　　restrict有三个可选值E/A/C
　　E：表示element  调用自定义指令的时候：
　　A：表示attribute 调用自定义指令的时候：
　　C：表示class 调用自定义指令的时候：
2.3.2 replace参数
　　replace是一个可选参数，默认值为false，当replace设置为true的时候，会替换directive指向的元素，当replace为默认或者设置为false的时候，directive的内容会作为子元素插入到directive指向的元素。
2.3.3 scope参数
　　可选值：false，true，{}
　　当值为false的时候：
　　　　在指令模板中可以直接使用父作用域中的变量，函数。代码点击链接：https://codepen.io/mafeifan/pen/kXORKN?editors=1010
　　　　当scope的值设置为false的时候，我们创建的指令和父作用域共享同一个model模型，所以在指令中修改模型数据，它会反映到父作用域的模型中。
　　当值为true的时候：
　　　　创建了一个新的作用域，只不过这个作用域继承了我们的父作用域。我们创建的这个作用域是一个新的作用域，只不过在初始化的时候，用了父作用域的属性和方法去填充我们的新作用域，但是父作用域不随着新作用域的改变而改变。
　　当值为{}的时候：
　　　　当将scope的值设置为{}的时候，意味着我们创建一个新的与父作用域隔离的新的作用域，用户就可以自定义属性的值来修改数据。上面的2.2的代码就是用户自定义作用域中的数据的实例。
2.3.4 template
　　定义的html模板
2.3.5 link函数
　　link函数：可以简单的理解为，当directive被angular编译后，就会直接执行link函数。
　　link函数包括三个参数：scope、element、attrs
　　　　scope：作用域
　　　　element：类似jQuery对象，这里就是指分页组件这个对象
　　　　attrs：是以map集合的形式存在的，这里指的是用户自定义属性的集合
 
具体的项目地址（找到index.html可直接运行）：https://github.com/0513Cassie/angular-pager
基于angular的分页组件插件，使用directive，将directive的内容放到js文件中，直接引用即可
标签：ble   2.3   rect   angular   $scope   attr   target   item   xor   
原文地址：http://www.cnblogs.com/leijing0607/p/7742527.html