怎么将分页封装成指令？

大家好，我是IT修真院深圳分院第02期学员，一枚正直善良的web程序员。

今天给大家分享一下，修真院官网js任务9，深度思考中的知识点——怎么将分页封装成指令？

1.背景介绍

对于指令，可以把它简单的理解成在特定DOM元素上运行的函数，指令可以扩展这个元素的功能。 例如，一些原生的指令如 ng-disabled ， ng-if ，ng-repeat ，ng-click 等。ng-click可以让一个元素能够监听click事件，并在接收到事件的时候执行AngularJS表 达式。正是指令使得AngularJS这个框架变得强大，并且在AngularJs我们可以自己通过directive来创造新的指令。

2.知识剖析

当在我们的项目中需要实现一些功能，比如，时间筛选、分页的功能，我们最先想到的可能是先去网上找找看，有没有相应的插件可以给我们直接拿来使用。但是插件代码一般十分复杂，无法定位bug进行修改，也无法保证修改后不会出现别的bug，用起来可能不太顺手。像一些实现简单功能的插件，我们可以利用AngularJS中的directive自己写一个指令，进行封装，也可以方便以后重复使用。

3.常见问题

怎么将分页封装成指令？

4.解决方案

先了解一下DIRECTIVE自定义指令中都可以设置哪些选项？

app.directive('pagination', function() {
return {
restrict: String,
priority: Number,
terminal: Boolean，
templateUrl: String,
replace: Boolean or String,
scope: Boolean or Object,
transclude: Boolean,
controller: String or function() { ... },
controllerAs: String,
require: String,
link: function() { ... },
compile: function() { ... }
});

5.编码实战

6.扩展思考

分页功能还可以怎么做？

7.更多讨论

1.还可以用directive自定义指令封装哪些插件

2.directive自定义指令中的scope作用和注意点

课后提问：

问：如果在一个页面当中使用2个同一分页插件，怎么避免冲突?

答：重新封装，定义不同的数据模型，如$scope.showPage1 、$scope.maxPage1；$scope.showPage2、$scope.maxPage2;在不同地方引用不同数据模型，避免冲突。

8.参考文献

参考一：AngularJS权威教程

参考二：Angular简易分页设计

参考三：angular 自定义指令详解 Directive

9.视频资料

怎么将分页封装成指令_腾讯视频

PPT

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~

下期不见不散~