大家好,我是IT修真院武汉分院第5期的学员朱英杰,一枚正直纯洁善良的WEB前端程序员。
1.背景介绍
指令
指令,我们可以将它简单的理解成为在特定dom元素上运行的函数,指令可以扩展这个元素的功能。
angular有很多内置的指令供我们使用,例如,ng-href;ng-src;ng-class,等一系列的指令。但随着项目的开发,
内置的指令,已经无法满足我们的需求。所以,我们需要自定义一些指令。比如,分页就是我们前端项目开发中经常碰到的功能。
2.知识剖析
自定义指令
首先,我们需要了自定义指令有哪些属性
app.directive('pagination', function() {
return {
restrict: String,//可选参数 E(元素) A(属性) C(类名)M(注释)
terminal: Boolean,//这个参数是告诉angular停止运行当前的元素上比本指令优先级低的指令。但同时当前的指令优先级相同的指令还是会被执行
templateUrl: String,
replace: Boolean or String,//如果设置了这个参数,值必须为true,因为默认值为false。默认值意味着模板会被当作子元素插入到调用此指令的元素内部
scope: Boolean or Object,
transclude: Boolean,
controller: String or function() { ... },
controllerAs: String,
require: String, //可以设置成为字符串或数组
link: function() { ... },
compile: function() { ... }
});
3.常见问题
如何将分页封装成指令?
4.解决方案
5.编码实战
6.扩展思考
如果不写成指令了?
7.参考文献
angular权威教程
Angular简易分页设计(一):基本功能实现
Angular简易分页设计(二):封装成指令
8.更多讨论
1、用directive自定义指令封装过哪些插件,并碰到了什么问题
提问
1、css能不能封装进指令
2、如何引入html模板
3、指令之间怎么通信
指令之间通信,跟控制器间的通信差不多,无非是也是几种方法:
1、通过指令自身参数
2、基于event传播的方式
3、service的方式