20.实现AngularJS渲染完毕后执行脚本

20.实现AngularJS渲染完毕后执行脚本

目前要实现这样一个功能：使用bootstrap-select和AngularJS实现动态下拉表单。

AngularJS用于实现下拉菜单的内容渲染，内容通过AJAX获得，代码如下：

    {{ type }}

bootstrap-select用做下拉表单样式渲染，select标签内容改动后，需要显示调用refresh指令进行重新渲染呢，例如

$('.selectpicker).selectpicker('refresh');

现在问题来了，如何实现在AngularJS渲染完DOM之后调用bootstrap-select进行select表单的重新渲染呢？

百度了一下，发现绝大部分人都是使用通过自定义AngularJS指令+link函数实现。果断不能接受！杀鸡岂用牛刀？

仔细想了一下，发现我们可以通过setTimeout很优雅地实现这个功能。JavaScript代码如下：

$http({
    url: '/types',
    method: 'GET',
}).success(function(response){
    $scope.types = response;
    $timeout(function(){
        $('.selectpicker').selectpicker('refresh');             
    },0);
});

主要原理就是利用了setTimeout函数所处的队列只会在调用栈清空后才会被执行。

也就是说，当setTimeout执行时，AngularJS的DOM渲染已经被执行完毕，并且调用栈已经清空了。此时bootstrap-select获得的DOM节点一定是最新的。

大家都采用的做法不一定都是最优，特别像一些杀鸡焉用牛刀的实现，遇到他们时，你就该好好想想了。