// scope.source為外部函數(shù)
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) {
// 對(duì)同步或異步返回的數(shù)據(jù)進(jìn)行統(tǒng)一處理
}

scope.$on('selectUpdate', function (e, data) {
// data.name是變化的菜單，dependents是當(dāng)前菜單所聲明的依賴數(shù)組
if ($.inArray(data.name, dependents) >= 0) {
onParentChange();
}
});
// 并且為了方便上文提到的source函數(shù)對(duì)于變動(dòng)值的調(diào)用，可以對(duì)所依賴的菜單進(jìn)行遍歷并保存當(dāng)前值
var values = {};
if (dependents) {
$.each(dependents, function (index, dependent) {
values[dependent] = selects[dependent].getValue();
});
}

directive('multiLevelSelect', ['$parse', '$timeout', function ($parse, $timeout) {
// 利用閉包，保存父級(jí)scope中的所有多級(jí)聯(lián)動(dòng)菜單，便于取值
var selects = {};
return {
restrict: 'CA',
scope: {
// 用于依賴聲明時(shí)指定父級(jí)標(biāo)簽
name: '@name',
// 依賴數(shù)組，逗號(hào)分割
dependents: '@dependents',
// 提供具體option值的函數(shù)，在父級(jí)change時(shí)被調(diào)用，允許同步/異步的返回結(jié)果
// 無論同步還是異步，數(shù)據(jù)應(yīng)該是[{text: 'text', value: 'value'},]的結(jié)構(gòu)
source: '=source',
// 是否支持控制選項(xiàng)，如果是，空值的標(biāo)簽是什么
empty: '@empty',
// 用于parse解析獲取model值（而非viewValue值）
modelName: '@ngModel'
},
template: ''
// 使用ng-show而非ng-if，原因上文已經(jīng)提到
+ '<option ng-show="empty" value="">{{empty}}</option>'
// 使用樸素的ng-repeat
+ '<option ng-repeat="item in items" value="{{item.value}}">{{item.text}}</option>',
require: 'ngModel',
link: function (scope, elem, attr, model) {
var dependents = scope.dependents ? scope.dependents.split(',') : false;
var parentScope = scope.$parent;
scope.name = scope.name || 'multi-select-' + Math.floor(Math.random() * 900000 + 100000);
// 將當(dāng)前菜單的getValue函數(shù)封裝起來，放在閉包中的selects對(duì)象中方便調(diào)用
selects[scope.name] = {
getValue: function () {
return $parse(scope.modelName)(parentScope);
}
};
// 保存初始值，原因上文已經(jīng)提到
var initValue = selects[scope.name].getValue();
var inited = !initValue;
model.$setViewValue('');
// 父級(jí)標(biāo)簽變化時(shí)被調(diào)用的回調(diào)函數(shù)
function onParentChange() {
var values = {};
// 獲取所有依賴的菜單的當(dāng)前值
if (dependents) {
$.each(dependents, function (index, dependent) {
values[dependent] = selects[dependent].getValue();
});
}
// 利用閉包判斷io造成的異步過期
(function (thenValues) {
// 調(diào)用source函數(shù)，取新的option數(shù)據(jù)
var returned = scope.source ? scope.source(values) : false;
// 利用多層閉包，將同步結(jié)果包裝為有then方法的對(duì)象
!returned || (returned = returned.then ? returned : {
then: (function (data) {
return function (callback) {
callback.call(window, data);
};
})(returned)
}).then(function (items) {
// 防止由異步造成的過期
for (var name in thenValues) {
if (thenValues[name] !== selects[name].getValue()) {
return;
}
}
scope.items = items;
$timeout(function () {
// 防止由同步（嚴(yán)格的說也是異步，注意事件隊(duì)列）造成的過期
if (scope.items !== items) return;
// 如果有空值，選擇空值，否則選擇第一個(gè)選項(xiàng)
if (scope.empty) {
model.$setViewValue('');
} else {
model.$setViewValue(scope.items[0].value);
}
// 判斷恢復(fù)初始值的條件是否成熟
var initValueIncluded = !inited && (function () {
for (var i = 0; i < scope.items.length; i++) {
if (scope.items[i].value === initValue) {
return true;
}
}
return false;
})();
// 恢復(fù)初始值
if (initValueIncluded) {
inited = true;
model.$setViewValue(initValue);
}
model.$render();
});
});
})(values);
}
// 是否有依賴，如果沒有，直接觸發(fā)onParentChange以還原初始值
!dependents ? onParentChange() : scope.$on('selectUpdate', function (e, data) {
if ($.inArray(data.name, dependents) >= 0) {
onParentChange();
}
});
// 對(duì)當(dāng)前值進(jìn)行監(jiān)聽，發(fā)生變化時(shí)對(duì)其進(jìn)行廣播
parentScope.$watch(scope.modelName, function (newValue, oldValue) {
if (newValue || '' !== oldValue || '') {
scope.$root.$broadcast('selectUpdate', {
// 將變動(dòng)的菜單的name屬性廣播出去，便于依賴于它的菜單進(jìn)行識(shí)別
name: scope.name
});
}
});
}
};
}]);