前言
虽然使用的技术比较老了,但是思想却还是适用于现在的vue等框架。
一:实现的样式
二:实现包括的功能点
1:下拉框内容是表格,类似于一个弹窗
- 表格内容最多六行,超出的显示滚动条,表头固定,可滚动。
- 支持键盘上下键,进行当前项的选择
- 支持键盘的enter选择键,并支持回调函数,进行页面的数据绑定
- 支持加载后台数据
- 支持绑定指令的input框对数据的搜索功能
- 支持input框填写的内容的校验,如果内容是手写的,则清空,必须是从选择框内选择的(点击选择或者enter选择)等功能
- 支持后台无数据时,显示无加载内容。
- 在请求后台时,在当前下拉框添加加载等待动画。
2:下拉内容是常见的select框形式
- 内容与表格基本一致
- 存在即有使用的地方,可根据自己的需要决定是否使用。
功能点总结:其实与原生的select下拉框形式一样,只不过是进行了一次封装,添加了与后台交互的逻辑。没办法,所有的实现都是因为需求的存在,说激进点,如果不是产品想出这个需求,我也不会去做。添加一句:万恶的产品。
三:实现的逻辑
封装一个angularjs的指令,通过传参将指令需要用到的数据从父层传到子层。指令控制如何展示与一些交互。父子只有数据的传输,没有操作上的控制。
首先,我们知道angularjs指令可以获取到父元素的方法,双向绑定的数据,常量字符串等。
-
对当前input框进行指令绑定,进行父子级的通信,传参大概包括:数据请求函数,渲染的类型(table select data city等,只要有数据,再进行页面UI修改即可),下拉弹窗的大小值指定,没有数据时下拉框显示的新建按钮名称与绑定的事件,当前input上绑定的model(用来做清空input)
- 当所需要的传参数据全部都有时,需要对下拉弹窗里的内容进行事件绑定,包括:input的focus调用后台接口,blur进行input的清空(填写的数据不符合要求时),上下键对当前渲染的项进行选择,enter键触发数据绑定。
- 根据数据进行渲染弹窗类型,使用ng-if进行弹窗内容的UI显示。比如ng-if==table ng-if==select 进行弹窗渲染。
四:实现的代码思想分析:
- angularjs的指令进行父子通信时,需要注意的就是scope的取值,传函数表达式时,scope = ‘&’ ,传model时 scope = ‘=’ ,传固定值时 scope='@'
- 一些函数写在父级ctr里,比如请求后台的函数。因为不同的页面需要,可能数据返回成功后有不同的操作,所以这个不好封装在指令里,需要保持指令的活性,如果你不想将请求后台的数据放在父controller里,也可以将请求地址传给指令,这样就可以在指令(子层)进行请求。
- table渲染时,也是封装了一个指令,这样之后在需要用到这个table指令时,可以较好较快的抽出使用
五:重点分析下拉框的table实现
本文只去进行table的实现,这样用户可以自己进行扩展。
- 指令html
- 父级ctroller
- 指令js
六:后续扩展与补充
- 如果在进行后台数据交互时,只针对当前input框内的model进行操作,可以将后台接口传到指令里,在指令里进行数据的交互,这样就完全脱离父级,成为一个独立的指令,相当于一个angularjs的插件。