900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 如何使用自定义指令封装翻页

如何使用自定义指令封装翻页

时间:2018-07-31 08:59:43

相关推荐

如何使用自定义指令封装翻页

大家好,我是IT修真院武汉分院第12期学员,一枚正直善良的web程序员。

今天给大家分享一下,修真院官网JS-9任务中如何使用自定义指令封装翻页插件

一、背景介绍

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

二、知识剖析

关于指令,因为我们是有直接讲指令的小课堂的,所以这里就简单说一下。

angular指令本质上就是AngularJs扩展具有自定义功能的html元素的途径。

内置指令,打包在AngularJs内部的指令,所有内部指令的命名空间 都使用ng作为前缀,所以在写自定义指令的时候,避免用ng作为指令命名的前缀。

创建指令的方式有四种,在指令里用 restrict属性控制:

E:元素

A:属性

C:css类

M:注释

向指令中传递数据,用template属性

directive 在使用隔离 scope 的时候,提供了三种方法同隔离之外的地方交互:

@ 绑定一个局部 scope 属性到当前 dom 节点的属性值。结果总是一个字符串,因为 dom 属性是字符串。

= 通过 directive 的 attr 属性的值在局部 scope 的属性和父 scope 属性名之间建立双向绑定。

& 提供一种方式执行一个表达式在父 scope 的上下文中。如果没有指定 attr 名称,则属性名称为相同的本地名称。(其实说白了,就是可以使用在父scope中定义的函数。)

replace:是否用模板替换当前元素。

true : 将指令标签替换成temple中定义的内容,页面上不会再有标签;

false :则append(追加)在当前元素上,即模板的内容包在标签内部。默认false。

三、常见问题

怎么将分页封装成指令?

四、解决方案

看demo

五、编码实战

六、拓展思考

分页功能还可以怎么做?

七、更多讨论

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

A1:比如说封装上传插件、轮播图

Q2:directive自定义指令中的scope作用和注意点

A2:创建一个作用域,用于传递数据

Q3:指令中controller跟link的区别?

A3:这两个都可以获取到作用域,元素,属性等引用,也都会执行一次。那当我们每次想要扩展个自定义指令时,应该用哪个?

控制器可以暴露一个API,而link可以通过require与其他的指令控制器交互

所以如果要开放出一个API给其他指令用就写在controller中,否则写在link中。简单来说,优先使用link。

八、参考文献

参考一:AngularJS权威教程

参考二:Angular简易分页设计

参考三:angular 自定义指令详解 Directive 如何使用自定义指令封装翻页

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。