AngularJS自定义分页模块-指令

最新推荐文章于 2021-01-11 20:38:49 发布

DevCsdner

最新推荐文章于 2021-01-11 20:38:49 发布

阅读量242

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript angularjs html5

本文链接：https://blog.youkuaiyun.com/smartboy_01/article/details/106594081

前端专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一个基于Angular的自定义分页指令实现，该指令能够动态调整每页显示的项目数量，支持首页、上一页、下一页和尾页操作，并能与父组件交互，更新当前页数和每页显示的数量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html页面

<!DOCTYPE html>
<html ng-app="a8_7">

<head>
    <title>scope属性是JSON对象</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
    <style type="text/css">
        .frame {
            padding: 2px 8px;
            margin: 0px;
            font-size: 12px;
            /* width: 320px; */
            background-color: #eee;
        }

        .tip {
            font-size: 9px;
            color: #666;
            margin: 3px 0px;
            padding: 5px 0px;
        }
    </style>
    <script src="module/pager/angular-pagination.js"></script>
</head>

<body>
    <div class="frame" ng-controller="c8_7">
        {{msg}}<br/>
        pageIndex:{{pageIndex}}<br />
        pageSize:{{pageSize}}
        <div class="tip">{{tip}}</div>
        <form class="form-inline">
            <!-- <pager-custom a-attr="{{text_name}}" b-attr="text_age" reset="reSet({name:text_name})">重置</pager-custom> -->
            <pager-custom page-index='3' total-page=40 total-count=800 page-change="pageChange(pager)"></pager-custom>
        </form>
    </div>

    <script type="text/javascript">
        var app = angular.module('a8_7', ['pagerCustom'])
            .controller('c8_7', function ($scope) {
                $scope.index = 0;
                $scope.pageChange = function (data) {
                    $scope.msg = "第" +  ($scope.index++) + "次调用加载数据方法。。。"
                    console.log('page change ,reload data--->', data);
                    $scope.pageIndex = data.pageIndex;
                    $scope.pageSize = data.pageSize;
                }
            })
    </script>
</body>

</html>

(function () {
    'use strict';
    var tpl = `
    <div class="row">
    <div class="ol-md-6 col-md-offset-3 form-inline">
        每页
        <select class="form-control" ng-model="pageSize" ng-options="x for x in pageRange">           
        </select>        
        条，
        <input class="btn btn-default" type="button" value="首页" ng-click="firstPage()">
        <input class="btn btn-default" type="button" value="上一页" ng-click="prevPage()">
        第 <input type="text" class="form-control" placeholder="page" ng-model="pageIndex">页 共{{totalPage}}页，共{{totalCount}}条
        <input class="btn btn-default" type="button" value="下一页" ng-click="nextPage()">
        <input class="btn btn-default" type="button" value="尾页" ng-click="lastPage()">             
    </div>
</div>
    `;
    var pagerCustom = angular.module("pagerCustom", []);
    pagerCustom.directive('pagerCustom', function () {

        return {
            restrict: 'EAC',
            // template: '<div class="tip"><span>姓名：{{textName}}</span><span>年龄：{{textAge}}</span></div><button ng-transclude></button>',
            // templateUrl: 'showTpl.html',
            template: tpl,
            transclude: true,
            scope: {
                // @父作用域修改会改变子作用域，子作用域修改不会改变父作用域
                //@在子作用域重置后，再修改父作用域内容，子作用域还会修改
                //scope属性设置为true时，子作用域重置后，再修改父作用域内容，子作用域不会修改
                //绑定属性值的方式为{{}}            

                pageIndex: '@',
                pageSize: '@',
                totalPage: '@',
                totalCount: '@',
                startRowIndex: '@',
                /**
                 * =父子作用域完全共享，同步
                 * 绑定属性值方式为=
                 */

                /*
                 * &绑定：可以在子作用域中直接调用父作用域中的方法，可以向函数传递实参
                 * 父级作用域绑定 通过&符号可以对父级作用域进行绑定，以便在其中运行函数。
                 * 意味着对这个值进行设置时会生成一个指向父级作用域的包装函数。 
                 * 要使调用带有一个参数的父方法，我们需要传递一个对象，这个对象的键是参数的名称，值 是要传递给参数的内容。
                 */
                pageChange: '&pageChange'
            },
            link: pageLink
        };

    });

    var pageLink = function (scope, iEle, iAttrs) {

        scope.pageIndex = scope.pageIndex ? scope.pageIndex : 0;
        scope.pageSize = scope.pageSize ? scope.pageSize : 15;
        scope.totalPage = scope.totalPage ? scope.totalPage : 0;
        scope.totalCount = scope.totalCount ? scope.totalCount : 0;
        scope.startRowIndex = scope.startRowIndex ? scope.startRowIndex : 1;
        scope.pageRange = scope.pageRange ? scope.pageRange : [5, 10, 15, 20];

        scope.firstPage = function () {
            scope.pageIndex = 1;
            scope.pageChange({
                pager: {
                    pageIndex: scope.pageIndex,
                    pageSize: scope.pageSize,
                }
            });
        }
        scope.lastPage = function () {
            scope.pageIndex = scope.totalPage;
            scope.pageChange({
                pager: {
                    pageIndex: scope.pageIndex,
                    pageSize: scope.pageSize,
                }
            });
        }
        //上一页
        scope.prevPage = function () {
            if (scope.pageIndex >= 1) {
                scope.pageIndex--;
                scope.pageChange({
                    pager: {
                        pageIndex: scope.pageIndex,
                        pageSize: scope.pageSize,
                    }
                });
            }
        }
        //下一页
        scope.nextPage = function () {
            if (scope.pageIndex < scope.totalPage) {
                scope.pageIndex++;
                scope.pageChange({
                    pager: {
                        pageIndex: scope.pageIndex,
                        pageSize: scope.pageSize,
                    }
                });
            }
        }

    };

}());

效果图
在这里插入图片描述