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. In App Purchases（IAP 应用程序內购买）: 完全攻略

    原文: http://troybrant.net/blog/2010/01/in-app-purchases-a-full-walkthrough/ 参考: http://www.cocoachina ...

  2. /usr/lib64/python2.6/site-packages/pycurl.so: undefined symbol: CRYPTO_set_locking_callback

    [root@frontend01 yum.repos.d]# cd /etc/yum.repos.d;wget http://rpms.adiscon.com/v8-stable/rsyslog.re ...

  3. 【转】如何判断CPU是大端还是小端模式

    原文网址:http://blog.csdn.net/ysdaniel/article/details/6617458 如何判断CPU是大端还是小端模式 http://blog.sina.com.cn/ ...

  4. Truncate Table 用法

    TRUNCATE TABLE 删除表中的所有行,而不记录单个行删除操作. 语法 TRUNCATE TABLE name 参数 name 是要截断的表的名称或要删除其全部行的表的名称. 注释 TRUNC ...

  5. [原创+实战+钓鱼]setoolkit+映射

    所需工具:setoolkit,花生壳 (此方法主要针对没有服务器,没有空间的攻击者.有服务器或者空间可以直接上传setoolkit的生成源码到服务器或者空间.) 1.setoolkit克隆一个站点 | ...

  6. iOS个别界面旋转问题

    /*是否应该自动旋转屏幕**/ - (BOOL)shouldAutorotate{ return YES; } /*是否支持屏幕旋转并指明旋转方向**/ - (UIInterfaceOrientati ...

  7. 获得HttpServletResponse及其他对象

    下面只列出获得 HttpServletResponse 对象的方法,获得 HttpServletRequest 对象方法类似. 在struts1.x Action类的execute方法中,有四个参数, ...

  8. 《STL源代码剖析》---stl_alloc.h阅读笔记

    这一节是讲空间的配置与释放,但不涉及对象的构造和析构,仅仅是解说对象构造前空前的申请以及对象析构后空间怎么释放. SGI版本号的STL对空间的的申请和释放做了例如以下考虑: 1.向堆申请空间 2.考虑 ...

  9. SVN 代码下载，上传

    代码下载,如: svn co https://99.99.16.1:8080/svn/pavenas/webpy --username bg 代码上传,如: svn commit -m "备 ...

  10. mybatis与spring的整合

    今天是mybatis的最后一天,也是最为重要的一天,mybatis与spring整合,(spring相关知识我会抽一个大的模块进行讲解). 首先加入Spring的依赖 <dependency&g ...