怎么将分页封装成指令？

【武汉】小课堂-js9

分享人：关楠

目录

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.知识剖析

基础知识

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

  1. angular指令本质上就是AngularJs扩展具有自定义功能的html元素的途径。
  2. 内置指令，打包在AngularJs内部的指令，所有内部指令的命名空间 都使用ng作为前缀，所以在写自定义指令的时候，避免用ng作为指令命名的前缀。
  3. 创建指令的方式有四种，在指令里用 restrict属性控制:
    • E:元素
    • A:属性
    • C:css类
    • M:注释
  4. 向指令中传递数据，用template属性

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

  • @ 绑定一个局部 scope 属性到当前 dom 节点的属性值。结果总是一个字符串，因为 dom 属性是字符串。
  • = 通过 directive 的 attr 属性的值在局部 scope 的属性和父 scope 属性名之间建立双向绑定。
  • & 提供一种方式执行一个表达式在父 scope 的上下文中。如果没有指定 attr 名称，则属性名称为相同的本地名称。（其实说白了，就是可以使用在父scope中定义的函数。）

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

  • true : 将指令标签替换成temple中定义的内容,页面上不会再有标签；
  • false ：则append（追加）在当前元素上，即模板的内容包在标签内部。默认false。

3.常见问题

怎么将分页封装成指令？

4.解决方案

看demo

5.编码实战

6.扩展思考

分页功能还可以怎么做？

7.更多讨论

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

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

指令中controller跟link的区别?

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

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

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

8.参考文献

参考一： AngularJS权威教程

参考二： Angular简易分页设计

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

鸣谢

感谢大家观看

关楠