angular + bootstrap实现分页 封装成 指令

• angular js 实现的分页。。。显示9条

基础

• Angular 1.5版本
• ng指令
• Bootstrap 3

ng指令的作用域

• directive 中创建隔离 scope
  • 只需要在directive中定义一个scope属性，即可创建隔离的scope

  app.directive('isolatedScope', function () {
       return {
           scope: {},
           ...
       };
   });
• directive 隔离 scope 如何和父 scope交互
  • @ 局部 scope 属性（一般是字符串）。单向绑定，父变子变，子变父不变；
  • = 双向绑定（一般使用对象）
  • & 能让directive在父scope执行一个表达式

使用方法

• 组件代码
  • directive

   module.directive('bootPager', [function() {
        return {
            scope: {
                pobj: '='
            },
            restrict: 'EA',
            templateUrl: 'Pager.html',
  
            link: function($scope, iElm, iAttrs, controller) {
                $scope.selectPage = function(page) {
                    //不能小于1大于最大
                    if (page < 1 || page > $scope.pages) return;
                    //显示9页（第五页开始向后加载）
                    if (page > 5) {
                        var newpageList = [];
                        for (var i = (page - 5); i < ((page + 4) > $scope.pages ? $scope.pages : (page + 4)); i++) {
                            newpageList.push(i + 1);
                        }
                        $scope.pageList = newpageList;
                    }
                    else {
                        var newpageList = [];
                        for (var i = 0; i < $scope.newPages; i++) {
                            newpageList.push(i + 1);
                        }
                        $scope.pageList = newpageList;
                    }
                    $scope.pobj.index = page;
                    $scope.isActivePage(page);
                };
  
                //设置当前选中页样式
                $scope.isActivePage = function(page) {
                    return $scope.pobj.index == page;
                };
                //上一页
                $scope.Previous = function() {
                    $scope.selectPage($scope.pobj.index - 1);
                }
                    //下一页
                $scope.Next = function() {
                    $scope.selectPage($scope.pobj.index + 1);
                };
            },
            controller: ['$scope', function($scope) {
                //一般监控进入两次（初始化一次，count一般变化一次）
                $scope.$watch('pobj.count', function(newValue, oldValue){
                    if ($scope.pobj.index == 1 && $scope.pobj.items && $scope.pobj.items.length > 0) {
                        $scope.pageSize = 10;
                        //分页数
                        $scope.pages = Math.ceil($scope.pobj.count / $scope.pageSize);
                        $scope.newPages = $scope.pages > 9 ? 9 : $scope.pages;
                        $scope.pageList = [];
                        //分页页码数组
                        for (var i = 0; i < $scope.newPages; i++) {
                            $scope.pageList.push(i + 1);
                        }
                    }
                }, true);
            }]
        };
    }]);
  • htmlTemplate

    <nav style="cursor:pointer;text-align: center;">
        <ul class="pagination">
            <li>
                <a ng-click="selectPage(1)">
                    <span>首页</span>
                </a>
            </li>
            <li>
                <a ng-click="Previous()">
                    <span>上一页</span>
                </a>
            </li>
            <li ng-repeat="page in pageList" ng-class="{active: isActivePage(page)}">
                <a ng-click="selectPage(page)">{{ page }}</a>
            </li>
            <li>
                <a ng-click="Next()">
                    <span>下一页</span>
                </a>
            </li>
            <li>
                <a ng-click="selectPage(pages)">
                    <span>尾页</span>
                </a>
            </li>
        </ul>
    </nav>
• 使用代码
  • html

    <boot-pager pobj="pobj">
        
    </boot-pager>
  • js

    angular.module('app',[])
    .controller('testController',['$scope','$http',function($scope,$http){
        //初始化
        $scope.pobj = {
            items: [],
            count: 0,
            index: 1
        };
        //服务器获取数据
        $scope.$watch('pobj.index', function(nValue, oValue){
            console.log($scope.pobj.index);
            if ($scope.pobj.index > 0) {
                $http.get('Service.js').then(function(res) {
                    $scope.pobj.items = res.data.records.slice(($scope.pobj.index - 1) * 10, ($scope.pobj.index - 1) * 10 + 10);
                    $scope.pobj.count = res.data.records.length;
                });
            }
        }, true);
    }]);