AngularJS中不仅内置了许多指令，而且开发人员也可以通过自定义指令来完成特殊操作，指令创建成功后可以到处复用。

Web应用中的分页处理最为常见，我们可以将分页模块编写成一个可以复用的Angular指令，在使用时无需考虑指令的内部实现细节，像使用普通HTML元素一样简单。

1：index.html

<!DOCTYPE html>

<html ng-app="myApp">

    <head>

        <title>TODO supply a title</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="stylesheet" href="../css/bootstrap.css"/>

    </head>

    <body>

        <div class="container" ng-controller="PageCtrl">

            <pagination num-pages="pages" curr-page="page" on-select-page="selectPage(page)"></pagination>

        </div>

    </body>

    <script src="../js/angular.js"></script>

    <script src="index.js"></script>

</html>

分页指令的使用如下：

<pagination num-pages="pages" curr-page="page" on-select-page="selectPage(page)"></pagination>

index.js

var myApp = angular.module('myApp', []);

myApp.controller('PageCtrl',['$scope', function($scope){

        $scope.pages = 10;

        $scope.page = 1;

        $scope.selectPage = function(page){

          console.log("选择的页："+page);

        };

}]);

myApp.directive('pagination', function(){

    return {

        restrict: 'E',

        scope: {

            numPages: '=',

            currPage: '=',

            onSelectPage: '&'

        },

        template: '<ul class="pagination">'

            +'<li ng-class="{disabled: noPreviousPage()}">'

            +'<a ng-click="selectPreviousPage()">上一页</a>'

            +'</li>'

            +'<li ng-repeat="page in pages" ng-class="{active: isActivePage(page)}">'

            +'<a ng-click="selectPage(page)">{{page}}</a>'

            +'</li>'

            +'<li ng-class="{disabled: noNextPage()}">'

            +'<a ng-click="selectNextPage()">下一页</a>'

            +'</li>'

            +'</ul>',

        replace: true,

        link: function(s){

            s.$watch('numPages', function(value){

                s.pages = [];

                for(var i=1;i<=value;i++){

                    s.pages.push(i);

                }

                if(s.currPage > value){

                    s.selectPage(value);

                }

            });

            //判读是否有上一页

            s.noPreviousPage = function(){

                return s.currPage === 1;

            };

            //判断是否有下一页

            s.noNextPage = function(){

                return s.currPage === s.numPages;

            };

            //判断当前页是否被选中

            s.isActivePage = function(page){

                return s.currPage===page;

            };

            //选择页数

            s.selectPage = function(page){

                if(!s.isActivePage(page)){

                    s.currPage = page;

                    s.onSelectPage({ page:page });

                }

            };

            //选择下一页

            s.selectNextPage = function(){

                if(!s.noNextPage()){

                    s.selectPage(s.currPage+1);

                }

            };

            //选择上一页

            s.selectPreviousPage = function(){

                if(!s.noPreviousPage()){

                    s.selectPage(s.currPage-1);

                }

            };

        }

    };

});

3:运行效果如下：

angular+bootstrap分页指令案例的更多相关文章

  1. angular分页指令

    目前的多个项目中都用到分页这个功能,为了提高可复用性,我特地分离出来写了个分页的指令.直接贴代码,详情如下: index.html <body id="sBill" ng-c ...

  2. Angular简易分页设计(二)：封装成指令

    (首先声明本文来自博客园本人原创,转载请说明出处.欢迎关注:http://www.cnblogs.com/mazhaokeng/) 之前我们讲过,Angular分页代码确实不难实现,但是由于在多个路由 ...

  3. AngularJs angular.bind、angular.bootstrap、angular.copy

    angular.bind 返回一个调用self的函数fn(self代表fn里的this).可以给fn提供参数args(*).这个功能也被称为局部操作,以区别功能. 格式:angular.bind(se ...

  4. Angular - - angular.bind、angular.bootstrap、angular.copy

    angular.bind 返回一个调用self的函数fn(self代表fn里的this).可以给fn提供参数args(*).这个功能也被称为局部操作,以区别功能. 格式:angular.bind(se ...

  5. 使用angular.bootstrap() 完成模块的手动加载

    之前我们看到使用ng-app指令,可以实现模块的自动加载.现在我们看下,angular中如何手动加载模块.需要使用到angular.bootstrap这个函数. <html> <he ...

  6. AngularJs--angular-pagination可复用的分页指令

    1.angular-pagination 是基于angular 编写的可复用分页指令 安装 克隆项目到本地: git clone https://github.com/febobo/angular-p ...

  7. angular.js分页代码的实例

    对于大多数web应用来说显示项目列表是一种很常见的任务.通常情况下,我们的数据会比较多,无法很好地显示在单个页面中.在这种情况下,我们需要把数据以页的方式来展示,同时带有转到上一页和下一页的功能.现在 ...

  8. bootstrap分页

    使用bootstrap分页插件,如下代码是html代码 <title>分页</title> <link href="page/bootstrap-3.3.5-d ...

  9. bootstrap 分页

    1.背景: 前端页面使用bootstrap分页,同时与搜索条件联动: 2. jsp页面由服务端返回后, 异步请求动态创建表格, 分页的数据由服务端第一次返回后初始化, 以后每次异步请求再更新. jsp ...

随机推荐

  1. 用Doxygen生成文档

    我是生成C/C++的文档,输出html格式的文档.就不做成CHM了. 注释要这种写:(当然,有数种注释风格,选择任意你喜欢的就行) /** * * 一系列的doxygen的 command * * * ...

  2. yiic模块module使用

    模块是一个独立的软件单元,它包含 模型, 视图, 控制器 和其他支持的组件. 在许多方面上,模块看起来像一个 应用.主要的区别就是模块不能单独部署,它必须存在于一个应用里. 用户可以像他们访问普通应用 ...

  3. Codeforces 235E Number Challenge

    http://codeforces.com/contest/235/problem/E 远距离orz......rng_58 证明可以见这里(可能要FQ才能看到) 还是copy一下证明吧: 记 $$f ...

  4. Python中的multiprocessing和threading

    Python中的multiprocessing和threading分别使用来实现多进程编程和多线程编程的.其中threading比较简单,而前者比较繁琐. 下面,我们进行一下分析: 多线程--thre ...

  5. html+css显示代码书写版式

    由于要显示行数,所以需选用html的列表标签ol,以下代码可以显示代码书写版式的效果: <style> .code-part { background: yellow; } .code-p ...

  6. HDU_2019——向排序好的数列中插入数

    Problem Description 有n(n<=100)个整数,已经按照从小到大顺序排列好,现在另外给一个整数x,请将该数插入到序列中,并使新的序列仍然有序.   Input 输入数据包含多 ...

  7. Spark standalone安装（最小化集群部署）

    Spark standalone安装-最小化集群部署(Spark官方建议使用Standalone模式)        集群规划:    主机        IP                    ...

  8. Ajax解析

    1.Ajax Asynchronous(异步的) javascript and xml 技术组成: CSS + xml +JavaScript +DOM Ajax核心对象: XmlHttpReques ...

  9. JavaScript新手学习笔记4——我记不住的几个坑：短路逻辑、按值传递、声明提前

    1.短路逻辑 逻辑运算中,如果前一个条件已经可以得出最终结论,则后续所有条件不再执行!这里的逻辑运算指的是逻辑与和逻辑或. 我们要理解逻辑与是两个条件都为真的时候,才为真,如果第一个就是假的,那么后面 ...

  10. @property属性关键字

    关于@property属性关键字使用注意:* weak(assign) :  代理\UI控件* strong(retain) : 其他对象(除代理\UI控件\字符串以外的对象)* copy : 字符串 ...