自定义指令

秒速五厘米 2022-06-05 12:08 249阅读 0赞

# 前言 #

除了 AngularJS 内置的指令外，我们还可以创建自定义指令。   
通过 .directive() 函数来添加自定义的指令。   
调用自定义指令时，需要在HTMl 元素上添加自定义指令名。   
自定义指令命名规则：使用驼峰命名法来命名，即除第一个单词外的首字母需大写。如： myDirective。   
在html页面调用该指令时需要以 - 分割，如： my-directive。示例代码：

<body ng-app="myApp">
    
    <my-directive></my-directive>
    
    <script> var app = angular.module("myApp", []); app.directive("myDirective", function() { return { template : "<h1>模板：可以写自己的html页面代码</h1>" }; }); </script>
    
    </body>
       
        
         1
         2
         3
         4
         5
         6
         7
         8
         9
         10
         11
         12
         13
         14

# html页面调用自定义指令的四种方式 #

通过在自定义指令里添加 restrict 属性,根据设置不同的值来决定html页面的调用方式，如：

var app = angular.module("myApp", []);
    app.directive("myDirective", function() { 
        return {
            restrict : "A",//只能通过属性调用
            template : "<h1>自定义指令!</h1>"
        };
    });
       
        
         1
         2
         3
         4
         5
         6
         7

restrict值的不同，决定了调用方式的不同

restrict 默认值为 EA, 即在html页面可通过元素名和属性名来调用自定义指令。

# 自定义指令属性详解 #

<table style="border-collapse:collapse; border-spacing:0px; max-width:100%; background-color:transparent; width:860px; border:1px solid rgb(238,238,238)"> 
 <thead style=""> 
  <tr style=""> 
   <th style="text-align:left; padding:8px; line-height:20px; vertical-align:top; border:1px solid rgb(238,238,238)"> 属性</th> 
   <th style="text-align:left; padding:8px; line-height:20px; vertical-align:top; border:1px solid rgb(238,238,238)"> 值类型</th> 
   <th style="text-align:left; padding:8px; line-height:20px; vertical-align:top; border:1px solid rgb(238,238,238)"> 说明</th> 
  </tr> 
 </thead> 
 <tbody style=""> 
  <tr style=""> 
   <td style="padding:8px; line-height:20px; vertical-align:top; border:1px solid rgb(238,238,238)"> restrict</td> 
   <td style="padding:8px; line-height:20px; vertical-align:top; border:1px solid rgb(238,238,238)"> string</td> 
   <td style="padding:8px; line-height:20px; vertical-align:top; border:1px solid rgb(238,238,238)"> 指令的调用方式，A、C、E、M</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:8px; line-height:20px; vertical-align:top; border:1px solid rgb(238,238,238)"> priority</td> 
   <td style="padding:8px; line-height:20px; vertical-align:top; border:1px solid rgb(238,238,238)"> number</td> 
   <td style="padding:8px; line-height:20px; vertical-align:top; border:1px solid rgb(238,238,238)"> 指令执行的优先级</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:8px; line-height:20px; vertical-align:top; border:1px solid rgb(238,238,238)"> template</td> 
   <td style="padding:8px; line-height:20px; vertical-align:top; border:1px solid rgb(238,238,238)"> string</td> 
   <td style="padding:8px; line-height:20px; vertical-align:top; border:1px solid rgb(238,238,238)"> 指令使用的模板，可将html页面代码写于此。只能与templateUrl二选其一</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:8px; line-height:20px; vertical-align:top; border:1px solid rgb(238,238,238)"> templateUrl</td> 
   <td style="padding:8px; line-height:20px; vertical-align:top; border:1px solid rgb(238,238,238)"> string</td> 
   <td style="padding:8px; line-height:20px; vertical-align:top; border:1px solid rgb(238,238,238)"> 从指定的url地址加载模板。只能与template二选其一</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:8px; line-height:20px; vertical-align:top; border:1px solid rgb(238,238,238)"> replace</td> 
   <td style="padding:8px; line-height:20px; vertical-align:top; border:1px solid rgb(238,238,238)"> boolean</td> 
   <td style="padding:8px; line-height:20px; vertical-align:top; border:1px solid rgb(238,238,238)"> 是否用模板替换当前元素。true : 将指令标签替换成temple中定义的内容,页面上不会再有<code style="font-family:&quot;Source Code Pro&quot;,monospace; font-size:14.4px; padding:2px 4px; color:rgb(63,63,63); white-space:nowrap">&lt;my-directive&gt;</code>标签；false ：则append（追加）在当前元素上，即模板的内容包在<code style="font-family:&quot;Source Code Pro&quot;,monospace; font-size:14.4px; padding:2px 4px; color:rgb(63,63,63); white-space:nowrap">&lt;my-directive&gt;</code>标签内部。默认false。</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:8px; line-height:20px; vertical-align:top; border:1px solid rgb(238,238,238)"> transclude</td> 
   <td style="padding:8px; line-height:20px; vertical-align:top; border:1px solid rgb(238,238,238)"> boolean</td> 
   <td style="padding:8px; line-height:20px; vertical-align:top; border:1px solid rgb(238,238,238)"> 是否将当前元素的内容转移到模板中</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:8px; line-height:20px; vertical-align:top; border:1px solid rgb(238,238,238)"> scope</td> 
   <td style="padding:8px; line-height:20px; vertical-align:top; border:1px solid rgb(238,238,238)"> boolean /object</td> 
   <td style="padding:8px; line-height:20px; vertical-align:top; border:1px solid rgb(238,238,238)"> 指定指令的作用域。false(默认值): 使用父作用域作为自己的作用域（每个引用自定义指令的标签若其中一个标签改变某一变量值，则会影响其他标签的值 ）。true: 新建一个作用域，该作用域继承父作用域（两个引用自定义指令的标签之间的变量互不影响）。JavaScript对象：与父作用域隔离，并指定可以从父作用域访问的变量</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:8px; line-height:20px; vertical-align:top; border:1px solid rgb(238,238,238)"> controller</td> 
   <td style="padding:8px; line-height:20px; vertical-align:top; border:1px solid rgb(238,238,238)"> function</td> 
   <td style="padding:8px; line-height:20px; vertical-align:top; border:1px solid rgb(238,238,238)"> 定义与其他指令进行交互的接口函数</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:8px; line-height:20px; vertical-align:top; border:1px solid rgb(238,238,238)"> require</td> 
   <td style="padding:8px; line-height:20px; vertical-align:top; border:1px solid rgb(238,238,238)"> string</td> 
   <td style="padding:8px; line-height:20px; vertical-align:top; border:1px solid rgb(238,238,238)"> 指定需要依赖的其他指令</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:8px; line-height:20px; vertical-align:top; border:1px solid rgb(238,238,238)"> link</td> 
   <td style="padding:8px; line-height:20px; vertical-align:top; border:1px solid rgb(238,238,238)"> function</td> 
   <td style="padding:8px; line-height:20px; vertical-align:top; border:1px solid rgb(238,238,238)"> 以编程的方式操作DOM，包括添加监听器等</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:8px; line-height:20px; vertical-align:top; border:1px solid rgb(238,238,238)"> compile</td> 
   <td style="padding:8px; line-height:20px; vertical-align:top; border:1px solid rgb(238,238,238)"> function</td> 
   <td style="padding:8px; line-height:20px; vertical-align:top; border:1px solid rgb(238,238,238)"> 编程的方式修改DOM模板的副本，可以返回链接函数</td> 
  </tr> 
 </tbody> 
</table>

# 对表格里的知识进行延伸 #

## 1.templateUrl ##

如果template里拼写的html页面代码十分的多页复杂，拼字符串的话就太麻烦啦，这里我们就可以选择templateUrl。我们可以将要拼写的html页面代码独立到一个页面里，如template.html；然后再指定该html文件所在的路径即可，如templateUrl:”template.html”。用到该自定义指令时，会自动发一个http请求来获取template.html对应的模板内容。这样做的缺点是，多了一个http请求。别急，可以改进的：   
angularJS规定了模板还可以用`<Script>`标签定义：

上面代码写在html页面的ng-controller指令所在标签的里面，这样就不用再去请求它了。示例：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
    </head>
    <body >
        <div ng-app="myApp" ng-controller="myController">
    
            
            <my-directive></my-directive>
    
            
            <script type="text/ng-template" id="template.html"> <div> 自定义指令模板的templateUrl形式</div> </script>
        </div>
    
        <script> //创建模块 var app = angular.module('myApp', []); //创建控制器 app.controller('myController', function($scope) { }); //创建自定义指令 app.directive("myDirective", function() { return { restrict:'E', templateUrl : "template.html" }; }); </script>
    </body>
    
    </html>
       
        
         1
         2
         3
         4
         5
         6
         7
         8
         9
         10
         11
         12
         13
         14
         15
         16
         17
         18
         19
         20
         21
         22
         23
         24
         25
         26
         27
         28
         29
         30
         31
         32
         33
         34

有多个模板时，我们可以将所有的模板集中在一个文件中，只需加载一次，然后根据id的不同调用不同的模板。

## 2.transclude ##

定义是否将当前元素(html页面的自定义指令)的内容转移到模板中。   
模板中要接收当前元素内容的标签需要使用ng-transclude指令。

<body >
        <div ng-app="myApp" ng-controller="myController">
            
            <my-directive>自定义指定令内容</my-directive>
    
            
            <script type="text/ng-template" id="template.html"> <div> 模板内容</div> <div ng-transclude></div>//模板接收上面自定义指令间的内容 </script>
        </div>
    
        <script> //创建模块 var app = angular.module('myApp', []); //创建控制器 app.controller('myController', function($scope) { }); //创建自定义指令 app.directive("myDirective", function() { return { templateUrl : "template.html", transclude : true//转移到模板中 }; }); </script>
    </body>
       
        
         1
         2
         3
         4
         5
         6
         7
         8
         9
         10
         11
         12
         13
         14
         15
         16
         17
         18
         19
         20
         21
         22
         23
         24
         25
         26

## 3.什么是scope的父作用域 ##

引用自定义指令的html页面的控制器所能控制的范围。下面代码的父作用域就是myController所控制的范围

<body >
        <div ng-app="myApp" ng-controller="myController">       
            <my-directive></my-directive>
        </div>
    
        <script> //创建模块 var app = angular.module('myApp', []); //创建控制器 app.controller('myController', function($scope){ }); //创建自定义指令 app.directive("myDirective", function() { return { template : "<h1>自定义指令!</h1>" }; }); </script>
    </body>
    
       
        
         1
         2
         3
         4
         5
         6
         7
         8
         9
         10
         11
         12
         13
         14
         15
         16
         17
         18
         19

## 4.scope属性的值是对象(object)时的用法 ##

AngularJS内置指令的用法：ng-model=”obj”，通过obj这个变量双向绑定值，controller里变了，html页面也跟着变化。这说明，内置指令不仅可作为属性，还可动态改变值，这个要是不懂的，看看基础语法。如下代码：

<div ng-app="myApp" ng-controller="myController">
        要动态变化的内容: <input ng-model="obj">
    </div>
    
    <script> var app = angular.module('myApp', []); app.controller('myController', function($scope) { $scope.obj = "这个字符串值会同步到html里"; }); </script>
       
        
         1
         2
         3
         4
         5
         6
         7
         8
         9
         10

自定义指令当然也需要实现这种功能啦。scope属性为对象时，可为自定义指令指定一个可以绑定值的属性。这里还得说明一下的是，这个scope属性与自定义指令里link属性里的scope参数是一个变量。

<body >
        <div ng-app="myApp" ng-controller="myController">
            
            <my-directive speak="obj"></my-directive>
        </div>
    
        <script> //创建模块 var app = angular.module('myApp', []); //创建控制器 app.controller('myController', function($scope) { $scope.obj="父作用域";//父作用域给自定义指令属性赋的值 }); //创建自定义指令 app.directive("myDirective", function() { return { template : "<p>模板内容</p>", scope:{ title:"=speak"//定义一个speak属性供html页面的自定义指令用。如果写成title:"="格式，则自定义指令里的属性名就是title。 }, link: function postLink(scope, iElement, iAttrs) { console.log(scope.title)//这里打印的值与控制器里的值一样 } }; }); </script>
    </body>
       
        
         1
         2
         3
         4
         5
         6
         7
         8
         9
         10
         11
         12
         13
         14
         15
         16
         17
         18
         19
         20
         21
         22
         23
         24
         25
         26
         27
         28
         29
         30

有了前面的一个示例，下面再来说说绑定策略：即用符号前缀给自定义指令传值。它是一个键值对，键是在自定义指令中使用的，值里符号后面的字符串是html页面自定义指令的属性名；如果值里只有符号，则html页面自定义指令的属性名就是键名。

--------------------

其余两种符号用法：

<body >
        <div ng-app="myApp" ng-controller="myController">
            
            <my-directive title="obj" str="abcd">自定义指定令的内容555</my-directive>
        </div>
    
        <script> //创建模块 var app = angular.module('myApp', []); //创建控制器 app.controller('myController', function($scope) { $scope.obj="父作用域";//父作用域给自定义指令属性赋的值 }); //创建自定义指令 app.directive("myDirective", function() { return { template : "<p >模板内容</p>", scope:{ title:"=", str:"@" }, link: function postLink(scope, iElement, iAttrs) { console.log(scope.str) console.log(scope.title) } }; }); </script>
    </body>
       
        
         1
         2
         3
         4
         5
         6
         7
         8
         9
         10
         11
         12
         13
         14
         15
         16
         17
         18
         19
         20
         21
         22
         23
         24
         25
         26
         27
         28
         29
         30

<body >
        <div ng-app="myApp" ng-controller="myController">
            
            <my-directive fun="test()"></my-directive>
        </div>
    
        <script> //创建模块 var app = angular.module('myApp', []); //创建控制器 app.controller('myController', function($scope) { $scope.test = function(){ console.log('自定义指令会调用该法，所以这句话会打印到控制台上') } }); //创建自定义指令 app.directive("myDirective", function() { return { template : "<p >模板内容</p>", scope:{ fun:"&"//属性名直接是fun }, link: function postLink(scope, iElement, iAttrs) { scope.fun();//调用父作用域的方法，好似不能传参，未深究。 } }; }); </script>
    </body>
       
        
         1
         2
         3
         4
         5
         6
         7
         8
         9
         10
         11
         12
         13
         14
         15
         16
         17
         18
         19
         20
         21
         22
         23
         24
         25
         26
         27
         28
         29
         30

## 5.controller属性 ##

controller属性用于提供对外的接口，即该自定义指令会被其他自定义指令调用。所谓的接口，就是this后的变量或方法。   
controller可以使用的参数，作用域、节点、节点的属性、节点内容的迁移，这些都可以通过依赖注入被传进来，所以你可以根据需要只写要用的参数，有`$scope,Z$element, $attrs, $transclude`。   
调用该自定义指令的指令需要放在该指令之间。假定firstDirective指令是要被调用的自定义指令，expander是调用者指令。如下：

<first-directive> <expander ng-repeat="item in list" attribute="list">{ { item.title}}:{ { item.text}}</expander> </first-directive>
       
        
         1
         2
         3

既然firstDirective内部还有指令，则firstDirective必须配置transclude属性为true。代码如下：

//用于被调用的自定义指令
        app.directive('firstDirective',function(){ 
            return {
                template : '<div ng-transclude></div>',
                replace : true,
                transclude : true,
                controller :function(){ 
                    this.getData = function(val){ 
                            var data = 3 * val;
                        return data;
                    }
                    this.a  = "abc";
                }
            }
        });
       
        
         1
         2
         3
         4
         5
         6
         7
         8
         9
         10
         11
         12
         13
         14
         15

调用其他指令的自定义指令必须配置require属性指定指令名。然后在link函数里就可注入要调用的指令。

//自定义指令
        app.directive('expander',function(){ 
            return {
                templateUrl : 'template.html',
                replace : true,
                transclude : true,
                require : '^?firstDirective',//引用其他自定义指令，^表示从父节点开始找，?表示将告诉$compile服务，如果所需的指令没找到，不要抛出异常
                scope : {
                    title : '=attribute'
                },
                link : function(scope,element,attris,firstDirct){ //注入
                    console.log(firstDirct.a)//调用其他指令的变量
                    console.log(firstDirct.getData(6)) //调用其他指令的方法 
                }
            };
        });
       
        
         1
         2
         3
         4
         5
         6
         7
         8
         9
         10
         11
         12
         13
         14
         15
         16

## 6.link属性用法 ##

link后的方法在指令中负责执行DOM 操作和注册事件监听器等。link函数有五个参数(scope,element,attrs,controller,linker)。link 方法的参数解释：   
scope: 它与自定义指令里的scope属性是一个东西。它是指令scope的引用，所以可改名为sco等其他名字。scope 变量在初始化时是不被定义的，link 方法会注册监视器监视值变化事件。   
element: 包含指令的DOM元素的引用， link 方法一般通过jQuery 操作实例（如果没有加载jQuery，还可以使用Angular’s jqLite ）。   
controller: 在有嵌套指令的情况下使用。这个参数作用在于把子指令的引用提供给父指令，允许指令之间进行交互，如前面的例子。   
注意：当调用link 方法时， 通过值传递（”@”）的scope 变量将不会被初始化，它们将会在指令的生命周期中另一个时间点进行初始化，如果你需要监听这个事件，可以使用scope.$watch 方法。

## 7.link与compile的区别 ##

compile函数有三个参数(cElement,cAttrs,cLinker)，使用compile函数可以在ng创建原始dom实例以及创建scope实例之前，改变原始的dom(template element)；可以应用于当需要生成多个element实例但只有一个template element的情况，ng-repeat就是一个最好的例子。它就在是compile函数阶段改变原始的dom生成多个原始dom节点，然后每个又生成element实例。因为compile只会运行一次,所以当你需要生成多个element实例的时候是可以提高性能的。   
link函数有五个参数(scope,element,attrs,ctrl,linker)。   
link又分为pre-link和post-link，在代码里直接用pre和post表示，当我们直接使用link时，默认跟post一样。我在网上找了个例子来说明一下区别，代码如下：

<body>
        <div ng-app="myApp" ng-controller="myController">
            <level-one>
                <level-two>
                    <level-three> Hello </level-three>
                </level-two>
            </level-one>
        </div>
        <script> //创建模块 var app = angular.module('myApp', []); //创建控制器 app.controller('myController', function($scope) { }); //自定义指令 function createDirective(name){ return function(){ return { restrict: 'E', compile: function(tElem, tAttrs){ console.log(name + ': compile => ' + tElem.html()); return { pre: function(scope, iElem, iAttrs){ console.log(name + ': pre link => ' + iElem.html()); }, post: function(scope, iElem, iAttrs){ console.log(name + ': post link => ' + iElem.html()); } } } } } } app.directive('levelOne', createDirective('levelOne')); app.directive('levelTwo', createDirective('levelTwo')); app.directive('levelThree', createDirective('levelThree')); </script>
    </body>
       
        
         1
         2
         3
         4
         5
         6
         7
         8
         9
         10
         11
         12
         13
         14
         15
         16
         17
         18
         19
         20
         21
         22
         23
         24
         25
         26
         27
         28
         29
         30
         31
         32
         33
         34
         35
         36
         37
         38
         39
         40

注意打印结果：

levelOne: compile => 
            <level-two>
                <level-three>
                    Hello 
                </level-three>
            </level-two>
     levelTwo: compile => 
                <level-three>
                    Hello 
                </level-three>
     levelThree: compile => 
                    Hello 
     levelOne: pre link => 
            <level-two>
                <level-three>
                    Hello 
                </level-three>
            </level-two>
    
    levelTwo: pre link => 
                <level-three>
                    Hello 
                </level-three>
    
    levelThree: pre link => 
                    Hello 
    
    levelThree: post link => 
                    Hello 
    levelTwo: post link => 
                <level-three>
                    Hello 
                </level-three>
    
    levelOne: post link => 
            <level-two>
                <level-three>
                    Hello 
                </level-three>
            </level-two>
       
        
         1
         2
         3
         4
         5
         6
         7
         8
         9
         10
         11
         12
         13
         14
         15
         16
         17
         18
         19
         20
         21
         22
         23
         24
         25
         26
         27
         28
         29
         30
         31
         32
         33
         34
         35
         36
         37
         38
         39
         40

分析打印结果：   
运行levelone指令中的compile函数，ng就会递归遍历它的dom节点，然后在level-two与level-three上面重复这些操作。所以会依次打印连续三个compile。   
pre会在所有compile执行完后且在所有post之前执行。这样可以在执行post前执行一些其他代码，有些类似AOP。   
由上面结果可知，post的执行顺序却是先levelthree最后levelone，即反向调用相关联的post-link函数。这么做的好处是，当我们运行levelone时，保证leveltwo与levelthree都已经执行过了，这样就会更安全。所以默认的link就是post。

# 一个我做过的分页例子 #

之所以展示这个代码，主要是给一些朋友看看真实的项目，，多余的东西删掉了，具体的注入这里就不在讲了。   
html页面代码：

<div class="wp-20" ng-controller="AppStatisticController" ng-cloak>
        <div class="panel-footer">
            <s-pagination conf="paginationConf"></s-pagination>
        </div>
    </div>
       
        
         1
         2
         3
         4
         5

控制器代码：

"use strict";//严格
    
    define(["application-configuration", "s-pagination", "tableDataService"], function (app) { 
        app.register.controller("AppStatisticController", ["$scope", "$rootScope", "$stateParams","$http", "tableDataService",
            function($scope, $rootScope, $stateParams, $http, tableDataService) {         
    
                var getTableDataSuccess = function(result) { 
                    if(result.c == 1) {
                        $scope.title = result.title;
                        $scope.lists = result.pageList;
                        $scope.total = result.data;
                        $scope.paginationConf.totalItems = result.total;
                    }else if(result.c == 2){
                        //弹出框，没有查到数据 
                    } else {
                        alert(result.i);
                    }
                };
    
                var getTableDataError = function(result) { 
                    alert(result);
                };
                /*重要的代码，这个paginationConf与自定义指令双向绑定数据*/
                $scope.paginationConf = {
                    currentPage: 1,
                    itemsPerPage: 10,
                    pagesLength: 9,
                    search: false,
                    onChange: function() { 
                        var param = {
                            "pageNo": this.currentPage,
                            "pageSize": this.itemsPerPage,
                            "timeType": $scope.formData.timeType,
                            "adStyle":$scope.formData.adStyle,
                        };
                        param.appId = $stateParams.appId;
                        tableDataService.getTableData(
                            param,
                            "ims/appStat.do",
                            getTableDataSuccess,
                            getTableDataError
                        );
                    }
                };
    
                $scope.$watch("formData",function(newValue,oldValue, scope) { 
                    if(newValue.keywords == oldValue.keywords) {
                           $scope.paginationConf.search = true;
                    }
                }, true);
    
           }]);
    });
    
       
        
         1
         2
         3
         4
         5
         6
         7
         8
         9
         10
         11
         12
         13
         14
         15
         16
         17
         18
         19
         20
         21
         22
         23
         24
         25
         26
         27
         28
         29
         30
         31
         32
         33
         34
         35
         36
         37
         38
         39
         40
         41
         42
         43
         44
         45
         46
         47
         48
         49
         50
         51
         52
         53
         54

自定义指令代码：也算是angularJS的分页插件

/** * 分页插件封装s-pagination.js * @date 2016-05-06 * @author Peter */
    
    angular.module('s.pagination', []).directive('sPagination',[function(){ //自定义指令
        return {
            restrict: 'E',//仅限元素名调用
            template: '<div class="page-list">' +
            '<ul class="pagination" ng-show="conf.totalItems > 0">' +
            '<li ng-class="{disabled: conf.currentPage == 1}" ng-click="prevPage()"><span>«</span></li>' +
            '<li ng-repeat="item in pageList track by $index" ng-class="{active: item == conf.currentPage, separate: item == \'...\'}" ' +
            'ng-click="changeCurrentPage(item)">' +
            '<span>{ { item }}</span>' +
            '</li>' +
            '<li ng-class="{disabled: conf.currentPage == conf.numberOfPages}" ng-click="nextPage()"><span>»</span></li>' +
            '</ul>' +
            '<div class="page-total" ng-show="conf.totalItems > 0">' +
            '第<input type="text" ng-model="jumpPageNum" ng-keyup="jumpToPage($event)"/>页 ' +
            '每页<select ng-model="conf.itemsPerPage" ng-options="option for option in conf.perPageOptions "></select>' +
            '/共<strong>{ { conf.totalItems }}</strong>条' +
            '</div>' +
            '<div class="no-items" ng-show="conf.totalItems <= 0">暂无数据</div>' +
            '</div>',
            replace: true,
            scope: {
                conf: '='//双向绑定数据
            },
            link: function(scope, element, attrs){ 
                // 变更当前页
                scope.changeCurrentPage = function(item) { 
                    if(item == '...'){
                        return;
                    }else{
                        scope.conf.currentPage = item;
                    }
                };
    
                // 定义分页的长度必须为奇数 (default:5)
                scope.conf.pagesLength = parseInt(scope.conf.pagesLength) ? parseInt(scope.conf.pagesLength) : 5 ;
                if(scope.conf.pagesLength % 2 === 0){
                    // 如果不是奇数的时候处理一下
                    scope.conf.pagesLength = scope.conf.pagesLength -1;
                }
    
                // conf.erPageOptions
                if(!scope.conf.perPageOptions){
                    scope.conf.perPageOptions = [10, 20, 30, 40, 50];
                }
    
                // pageList数组
                function getPagination(newValue, oldValue) { 
                    //新增属性search 用于附加搜索条件改变时触发
                    if(newValue[1] != oldValue[1] || newValue[2] != oldValue[2]) {
                        scope.conf.search = true;
                    }
                    // conf.currentPage
                    scope.conf.currentPage = parseInt(scope.conf.currentPage) ? parseInt(scope.conf.currentPage) : 1;
    
                    // conf.totalItems
                    scope.conf.totalItems = parseInt(scope.conf.totalItems) ? parseInt(scope.conf.totalItems) : 0;
    
                    // conf.itemsPerPage (default:15)
                    scope.conf.itemsPerPage = parseInt(scope.conf.itemsPerPage) ? parseInt(scope.conf.itemsPerPage) : 15;
    
                    // numberOfPages
                    scope.conf.numberOfPages = Math.ceil(scope.conf.totalItems/scope.conf.itemsPerPage);
    
                    // judge currentPage > scope.numberOfPages
                    if(scope.conf.currentPage < 1){
                        scope.conf.currentPage = 1;
                    }
    
                    // 如果分页总数>0，并且当前页大于分页总数
                    if(scope.conf.numberOfPages > 0 && scope.conf.currentPage > scope.conf.numberOfPages){
                        scope.conf.currentPage = scope.conf.numberOfPages;
                    }
    
                    // jumpPageNum
                    scope.jumpPageNum = scope.conf.currentPage;
    
                    // 如果itemsPerPage在不在perPageOptions数组中，就把itemsPerPage加入这个数组中
                    var perPageOptionsLength = scope.conf.perPageOptions.length;
                    // 定义状态
                    var perPageOptionsStatus;
                    for(var i = 0; i < perPageOptionsLength; i++){
                        if(scope.conf.perPageOptions[i] == scope.conf.itemsPerPage){
                            perPageOptionsStatus = true;
                        }
                    }
                    // 如果itemsPerPage在不在perPageOptions数组中，就把itemsPerPage加入这个数组中
                    if(!perPageOptionsStatus){
                        scope.conf.perPageOptions.push(scope.conf.itemsPerPage);
                    }
    
                    // 对选项进行sort
                    scope.conf.perPageOptions.sort(function(a, b){ return a-b});
    
                    scope.pageList = [];
                    if(scope.conf.numberOfPages <= scope.conf.pagesLength){
                        // 判断总页数如果小于等于分页的长度，若小于则直接显示
                        for(i =1; i <= scope.conf.numberOfPages; i++){
                            scope.pageList.push(i);
                        }
                    }else{
                        // 总页数大于分页长度（此时分为三种情况：1.左边没有...2.右边没有...3.左右都有...）
                        // 计算中心偏移量
                        var offset = (scope.conf.pagesLength - 1)/2;
                        if(scope.conf.currentPage <= offset){
                            // 左边没有...
                            for(i =1; i <= offset +1; i++){
                                scope.pageList.push(i);
                            }
                            scope.pageList.push('...');
                            scope.pageList.push(scope.conf.numberOfPages);
                        }else if(scope.conf.currentPage > scope.conf.numberOfPages - offset){
                            scope.pageList.push(1);
                            scope.pageList.push('...');
                            for(i = offset + 1; i >= 1; i--){
                                scope.pageList.push(scope.conf.numberOfPages - i);
                            }
                            scope.pageList.push(scope.conf.numberOfPages);
                        }else{
                            // 最后一种情况，两边都有...
                            scope.pageList.push(1);
                            scope.pageList.push('...');
    
                            for(i = Math.ceil(offset/2) ; i >= 1; i--){
                                scope.pageList.push(scope.conf.currentPage - i);
                            }
                            scope.pageList.push(scope.conf.currentPage);
                            for(i = 1; i <= offset/2; i++){
                                scope.pageList.push(scope.conf.currentPage + i);
                            }
    
                            scope.pageList.push('...');
                            scope.pageList.push(scope.conf.numberOfPages);
                        }
                    }
    
                    if(scope.conf.onChange){
                        //请求数据
                        if(scope.conf.search) {
                            scope.conf.onChange();
                            scope.conf.search = false;
                        }
    
                    }
                    scope.$parent.conf = scope.conf;
                }
    
                // prevPage
                scope.prevPage = function(){ 
                    if(scope.conf.currentPage > 1){
                        scope.conf.currentPage -= 1;
                    }
                };
                // nextPage
                scope.nextPage = function(){ 
                    if(scope.conf.currentPage < scope.conf.numberOfPages){
                        scope.conf.currentPage += 1;
                    }
                };
    
                // 跳转页
                scope.jumpToPage = function(){ 
                    scope.jumpPageNum = scope.jumpPageNum.replace(/[^0-9]/g,'');
                    if(scope.jumpPageNum !== ''){
                        scope.conf.currentPage = scope.jumpPageNum;
                    }
                };
    
                scope.$watch(function() { 
    
                    if(!scope.conf.totalItems) {
                        scope.conf.totalItems = 0;
                    }
                    if(angular.isUndefined(scope.conf.search)) {
                        scope.conf.search = false;
                    }
    
                    var newValue = [scope.conf.totalItems, scope.conf.currentPage, scope.conf.itemsPerPage, scope.conf.search];
                    return newValue;
                }, getPagination, true);
            }
        };
    }]);
       
        
         1
         2
         3
         4
         5
         6
         7
         8
         9
         10
         11
         12
         13
         14
         15
         16
         17
         18
         19
         20
         21
         22
         23
         24
         25
         26
         27
         28
         29
         30
         31
         32
         33
         34
         35
         36
         37
         38
         39
         40
         41
         42
         43
         44
         45
         46
         47
         48
         49
         50
         51
         52
         53
         54
         55
         56
         57
         58
         59
         60
         61
         62
         63
         64
         65
         66
         67
         68
         69
         70
         71
         72
         73
         74
         75
         76
         77
         78
         79
         80
         81
         82
         83
         84
         85
         86
         87
         88
         89
         90
         91
         92
         93
         94
         95
         96
         97
         98
         99
         100
         101
         102
         103
         104
         105
         106
         107
         108
         109
         110
         111
         112
         113
         114
         115
         116
         117
         118
         119
         120
         121
         122
         123
         124
         125
         126
         127
         128
         129
         130
         131
         132
         133
         134
         135
         136
         137
         138
         139
         140
         141
         142
         143
         144
         145
         146
         147
         148
         149
         150
         151
         152
         153
         154
         155
         156
         157
         158
         159
         160
         161
         162
         163
         164
         165
         166
         167
         168
         169
         170
         171
         172
         173
         174
         175
         176
         177
         178
         179
         180
         181
         182
         183
         184
         185
         186
         187
         188