自定义 AngularJS UI Bootstrap 下拉框

上一篇文章我们简单介绍了 UI Bootstrap 渐进增强，侧重于通过修改样式来增强。今天我们来自定义一个下拉框组件，通过使用自定义指令来增强。我在自定义 Bootstrap 下拉框中已经介绍过自定义下拉框的背景了，只不过现在我们是用 AngularJS UI Bootstrap 来实现。

选择原型

这个就不详细说了，基于 UI Bootstrap 的下拉菜单组件 dropdown 实现。Bootstrap 风格的组件基本上都没选择状态，比较适合服务器渲染。客户端渲染下拉框肯定要不刷新保存当前项。明确这一点很重要，它关系到下一步我们要选择什么样的接口。

确定接口

封装组件最重要的就是确定接口。设计良好的组件我们遵循一些原则，比如说“单一责任原则原则”（SRP：Single Responsibility Principle）来保证高内聚低耦合，DRY(Don't Repeat Yourself )原则来消除重复的代码。需要这些原则说白了说是组件尽量功能单一，复用性要强，通过组合而不是继承来实现功能复杂的组件。本实例要做自定义外观统一的下拉框，不要求附加自定义渲染项、实时搜索等炫酷功能，和原生下拉框功能差不多。基于此，我们确定以下接口：

options：数据源(简单数组或关联数组)
selected：当前选择项
labelField：label 对应的数据源字段，默认为 lable
valueField：value 对应的数据源字段，默认为 value
disabled：下拉框是否可用，默认为 false

复用性强的组件问题基于数据驱动的，不管是用 AngularJS、Vue.js、React，甚至什么框架都不用，基于数据的声明式方式一般都比基于 DOM 的命令式方式要灵活。在 AngularJS 中，将 options 作为输入的数据源，通过 ng-repeat 指令很容易就渲染出下拉列表。labelField 和 valueField 两个可选参数设定了默认值，主要是为了适配不能直接满足需求的数据。当然如果 options 就简单数组就没有必要设置它们的。不难看出 SOLID 中的另一个原则：开放封闭原则（OCP The Open Closed Principle）

页面加载完成时会初始化一个选择项，或者用户在下拉框中选择某一项时会保存当前选项，点击提交按钮时会将当前选项对应的数据提交给后台，这都是最基本的数据输入输出。selected 对象利用 AngularJS 的双向绑定很容易实现数据的输入输出，当然你们通过公开回调函数来实现，但没指定双向绑定属性方便。

disabled 参数保证了 Web 表单组件的完整性，原生的下拉框组件也的这个属性。