多级联动菜单是常见的前端组件，比如省份-城市联动、高校-学院-专业联动等等。场景虽然常见，但仔细分析起来要实现一个通用的无限分级联动菜单却不一定像想象的那么简单。比如，我们需要考虑子菜单的加载是同步的还是异步的？对于初始值的回填发生在前端还是后端？如果异步加载，是否对于后端API的返回格式有严格的定义？是否容易实现同步、异步共存？是否可以灵活的支持各类依赖关系？菜单中是否有空值选项？……一系列的问题都需要精心处理。
带着这些需求搜索了一圈，不太出乎意料，并没有能在AngularJS的生态中找到一个很适合的插件或者指令。于是只好尝试自己实现了一个。
本文的实现基于AngularJS，但是思路通用，熟悉其他框架类库的同学也可以阅读。
首先重新梳理了一下需求，由于AngularJS的渲染发生在前端，以前在后端根据已有值获取各级菜单的option并在模板层进行渲染的方案并不是很适合，而且和很多同学一样，我个人并不喜欢这样实现方式：很多时候，即使在后端完成了第一次对option选项的拉取和对初始值的回填，但由于子级菜单的加载依赖于api，前端也需要监听onchange事件并进行ajax交互，换言之，一个简单的二级联动菜单竟然需要把逻辑撕裂在前、后端，这样的方式并不值得推崇。
关于同步、异步的加载方式，虽然大多数时候整个步骤是异步的，但是对于部分选项不多的联动菜单，也可以由一个api拉取所有数据，进行处理、缓存后供子级菜单渲染使用。因此同步、异步的渲染方式都应该支持。
至于api返回格式的问题，如果正在进行的是一个新的项目，或者后端程序员可以快速响应需求变动，或者前端同学本身就是全栈，这个问题可能不那么重要；但是很多时候，我们交互的api已经被项目的其他部分所使用，出于兼容性、稳定性的考虑，调整json的格式并非是一个可以轻松做出的决定；因此在本文中，对于子级菜单option数据的获取将从directive本身解耦出来，由具体业务逻辑处理。
那如何实现对灵活依赖关系的支持呢？除了最常见的线性依赖以外，也应支持树状依赖、倒金字塔依赖甚至复杂的网状依赖。由于这些业务场景的存在，将依赖关系硬编码到逻辑较为复杂。经过权衡，组件间将通过事件进行通信。
需求整理如下：
* 支持在前端完成初始值回填
* 支持子集菜单选项的同步、异步获取
* 支持菜单间灵活的依赖关系（比如线性依赖、树状依赖、倒金字塔依赖、网状依赖）
* 支持菜单空值选项(option[value=""])
* 子集菜单的获取逻辑从组件本身解耦
* 事件驱动，各级菜单在逻辑上相互独立互不影响
由于多级联动菜单对于AngularJS中select标签的原有行为侵入性较大，为了之后编程方便，减少潜在冲突，本文将采用<option ng-repeat="item in items" value="{{item.value}}">{{item.text}}</optoin>的朴素方式，而非ngOptions。
1. 首先来思考第一个问题，如何在前端进行初始值的回填
多级联动菜单最明显的特点是，上一级菜单更改后，下一级菜单会被（同步或异步地）重新渲染。在回填值的过程中，我们需要逐级回填，无法在页面加载时（或路由加载或组件加载等等）时瞬间完成该过程。尤其在AngularJS中，option的渲染过程应该发生在ngModel的渲染之前，否则即使option中有对应值，也会造成找不到匹配option的情况。
解决方案是在指令的link阶段，首先保存model的初始值，并将其赋为空值(可以调用$setViewValue)，并在渲染完成后再异步地对其赋回原值。
2. 如何解耦子选项获取的具体逻辑，并同时支持同步、异步的方式
可以使用scope中的"="类属性，将一个外部函数暴露到directive的link方法中。每次在执行该方法后，判断其是否为promise实例（或是否有then方法），根据判断结果决定同步或异步渲染。通过这样的解耦，使用者就可以在传入的外部函数中轻松地决定渲染方式了。为了使回调函数不那么难看，我们还可以将同步返回也封装为一个带then方法的对象。如下所示：
// scope.source为外部函数 var returned = scope.source ? scope.source(values) : false; !returned || (returned = returned.then ? returned : { then: (function (data) { return function (callback) { callback.call(window, data); }; })(returned) }).then(function (items) { // 对同步或异步返回的数据进行统一处理 }
3. 如何实现菜单间基于事件的通信
大体上还是通过订阅者模式实现，需要在directive上声明依赖；由于需要支持复杂的依赖关系，应该支持一个子集菜单同时有多个依赖。这样在任何一个所依赖的菜单变化时，我们都可以通过如下方式进行监听：