【js-9】怎么将分页封装成指令?

分享人:徐炜

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

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() { ... }
                    });
                
            

restrict: String,

可选字符串参数,可以设置这个指令在DOM中可以何种形式被声明,默认为A(属性) 设置为“E”(标签) 设置为"C"(类名) M(注释) <--directive:my-directive expression-->

priority: Number

优先级,可忽略,默认为0, ngRepeat的优先级为1000,这样就可以保证在同一元素上,它总是在其他指令之前被调用

terminal:boolean

默认为false,如果为true则停止运行当前元素上比本指令优先级更低的指令,优先级相同的指令还是会被执行。

template:string or Template Function 指令中重要的属性,必须设置如下一种 1.一段html文本 2.可以接受两个参数的函数 模板中必须只有一个根标签。 当html过长时,可以设置templateUrl引用 templateUrl: String 接受一个路径的字符串,还可以在script标签中写模板。

replace: Boolean, 默认为false(模板内容会加载到标签内部),true(模板内容会替换当前标签) transclude: Boolean 是否使用ng-transculde来包含html中原有的内容,接收两个参数true/false。默认为false 如果指令使用了 transclude 参数,那么在指令里的控制器中就无法正常监听数据模型的变化了

scope: Boolean or Object 默认为false。直接使用父scope,比较危险。 设置为true,继承父scope 设置为对象,创建一个新的隔离的scope,仍然可以与父scope通信 对象中可设置的绑定方式有三种: 1.@ 单向绑定,外部scope能影响内部scope,但反过来不成立 2.= 双向绑定,外部scope和内部scope的model能够互相改变 3.& 在父scope的上下文中执行一个表达式。此表达式可以是一个function

controller: String or function(scope, element, attrs, transclude, otherInjectables) { ... } 注册在应用中的控制器的构造函数 一般是写为呈现视图之前而准备的数据或者是与其他指令进行数据交互而暴露这个api controllerAs: String 这个选项是用来设置控制器的别名的

compile 和 link 选项是互斥的。如果同时设置了这两个选项,那么会把 compile所返回的函数当作链接函数,而 link 选项本身则会被忽略。 通常情况下,如果设置了 compile 函数,说明我们希望在指令和实时数据被放到DOM中之前进行DOM操作,在这个函数中进行诸如添加和删除节点等DOM操作是安全的

5.编码实战

6.扩展思考

出了分页组件还可以自定义什么组件?

7.参考文献

8.更多讨论

感谢观看

by陈杰超|黄源志|徐炜