bootstrap-select在angular上的应用

1、bootstrap-select 依赖bootstrap.js ，又依赖jQuery，这些都可以用requirejs来处理。

2、一般bootstrap-select 都放在具体的模块上，而是动态加载的，所以想只在HTML上写class = selectpicker是不行的，因为HTML加载进来的时候，依赖的scope的变量和HTML还未绑定完成，不能立马 $('#ui-role').selectpicker(); 

3、那么能不能等HTML加载完了，触发的事件，再来 $('#ui-role').selectpicker(); ，比如 $scope.$watch('$viewContentLoaded', function() { }); ，结果是一样的，页面作用域的内容还没绑定到页面上， $('#ui-role').selectpicker(); 可以执行，但是下拉框没有内容。

4、最后只能自定义属性指令，当加载完时 $emit('ready') ，页面上注册该事件，收到通知再来  $('#ui-role').selectpicker(); ，结果是可行的。

5、属性指令代码：

 1     app.directive('onReady', function ($timeout) {
 2         return {
 3             restrict: 'A',
 4             link: function (scope, element, attr) {
 5                 if (scope.$last === true) {
 6                     $timeout(function () {
 7                         scope.$emit('ready');
 8                     });
 9                 }
10             }
11         }
12     });

6、页面部分代码，用于发出“完成信号”，我放在页面最后：

1 <div ng-repeat="x in [0]" on-ready=""></div>

7、Js注册事件：

1         $scope.$on('ready', function () {
2             $('#ui-role').selectpicker();
3         });

 2017.12.18 续 ==> 

当然简单点，也可以推迟0.5秒 setTimeout(code,millisec) 再执行 $('#ui-role').selectpicker(); ，不过流畅度稍减，也可能0.5秒不够。

posted on 2017-12-18 12:45  jonney_wang  阅读(439)  评论(0)  编辑  收藏  举报

导航