20.實現(xiàn)AngularJS渲染完畢后執(zhí)行腳本
目前要實現(xiàn)這樣一個功能：使用bootstrap-select和AngularJS實現(xiàn)動態(tài)下拉表單球化。
AngularJS用于實現(xiàn)下拉菜單的內(nèi)容渲染风罩，內(nèi)容通過AJAX獲得凰荚，代碼如下：
<select class="selectpicker" data-ng-model="queryForm.type">
<option value="{{ type }}" data-ng-repeat="type in types">{{ type }}</option>
</select>
<script>
$http({
url: '/types',
method: 'GET',
}).success(function(response){
$scope.types = response;
});
</script>
bootstrap-select用做下拉表單樣式渲染梨与，select標簽內(nèi)容改動后鸣驱，需要顯示調(diào)用refresh指令進行重新渲染呢吏口，例如
$('.selectpicker).selectpicker('refresh');
現(xiàn)在問題來了统台，如何實現(xiàn)在AngularJS渲染完DOM之后調(diào)用bootstrap-select進行select表單的重新渲染呢雕擂？
百度了一下，發(fā)現(xiàn)絕大部分人都是使用通過自定義AngularJS指令+link函數(shù)實現(xiàn)贱勃。果斷不能接受井赌！殺雞豈用牛刀？
仔細想了一下贵扰，發(fā)現(xiàn)我們可以通過setTimeout很優(yōu)雅地實現(xiàn)這個功能仇穗。JavaScript代碼如下：
$http({
url: '/types',
method: 'GET',
}).success(function(response){
$scope.types = response;
$timeout(function(){
$('.selectpicker').selectpicker('refresh');
},0);
});
主要原理就是利用了setTimeout函數(shù)所處的隊列只會在調(diào)用棧清空后才會被執(zhí)行。
也就是說戚绕，當setTimeout執(zhí)行時纹坐，AngularJS的DOM渲染已經(jīng)被執(zhí)行完畢，并且調(diào)用棧已經(jīng)清空了舞丛。此時bootstrap-select獲得的DOM節(jié)點一定是最新的耘子。
大家都采用的做法不一定都是最優(yōu)，特別像一些殺雞焉用牛刀的實現(xiàn)球切，遇到他們時谷誓，你就該好好想想了。
