Angularjs和引导选择插件

Question

我想要创建一个角指令来使用引导-选择插件，特别是在<option>标记http://silviomoreto.github.io/bootstrap-select/3/#data-subtext上使用一个http://silviomoreto.github.io/bootstrap-select/3/#data-subtext属性的选项，这需要如下所示：

html标记

<select>
    <option data-subtext="Mustard's yellow" >Mustard</option>
    <option data-subtext="Ketchup's red">Ketchup</option>
    <option data-subtext="I don't know about Relish">Relish</option>
</select>

javascript

$('select').selectpicker({showSubtext:true});

我认为ng-options是不可能的，因为我必须将data-subtext添加到每个<option>标记中(如果我错了，请纠正我)。

到目前为止，我得到的是：

index.html

<select ng-model="idCourse" class="form-control input-sm" data-live-search="true" select-picker>
    <option ng-repeat="c in cources" value="{{c.id}}" data-subtext="{{c.name}}">{{c.code}}</option>
</select>

module.js

angular.module('myApp', [])

  .controller('ctrl',['$scope', function($scope){
    $scope.courses = [
      {id:1, code:'CS1607', name:'computer science beginner'},
      {id:2, code:'PH006', name:'Quantum physics'},
      {id:3, code:'CSB-9', name:'Machine Learning'}
      ];
  }])
  
  .directive('selectPicker', function(){
    return {
      restrict: 'A',
      link:function(scope, elem){
        elem.selectpicker({showSubtext:true});
      }
    };
});

我遇到的问题是，select插件是在角填充数据之前调用的，我已经为代码创建了一个http://plnkr.co/edit/t8Fwukiq5phb7Z9sTodE?p=preview。谢谢你的帮助。

编辑

正如mer10z_tech建议的那样，使用$timeout解决了这个问题：

//omitted...
.directive('selectPicker', ['$timeout', function($timeout){
    return {
      restrict: 'A',
      link:function(scope, elem){
        $timeout(function() {
          elem.selectpicker({showSubtext:true});
        }, 0);
      }
    };
}]);

Answer 1

我会绑定您的selectPicker插件后，角编译视图。她是怎么做的

function MyCtrl($scope) {
    angular.element(document).ready(function () {
        $('select').selectpicker({showSubtext:true});
    });
}

它相当于$(document).ready()

Answer 2

我知道这篇文章是很久以前写的，但我希望这个解决方案能对其他人有所帮助。

我找到了另一个解决问题的办法。

我所做的是首先使用angularjs从后端加载数据，并在.success中加载数据，在验证之后，我编写了以下代码：

angular.element(document).ready(function () {
    $('select').selectpicker("destroy"); 
    $('select').selectpicker("render"); 
});

我试着在没有angular.element(document).ready(function (){})的情况下做这件事，但什么也没发生。我想插件的方法只在这个函数中起作用。