Bootstrap-Select 带有 Angular JS 和 ajax 数据的插件不工作

Question

http://plnkr.co/edit/1ATuPILnevk6gCvYRvee?p=preview

angular.module('emfModule')
  .directive('selectpicker', function ($timeout) {
      return {
          restrict: 'C',
          link: function (scope, element, attrs) {

              var $el = $(element);
              $timeout(function () {

                  $el.selectpicker({
                      style: 'btn-default',
                      size: false
                  });


              });


          }
      };
  });

您好，我正在尝试通过 ajax 将数据加载到 angular 应用程序的下拉列表中。数据正在通过，我可以填充控件，但是当我尝试使用 bootstrap-select 插件时，它失败了。我尝试使用 angular 指令将其包装起来，但没有帮助。上面的 Plunk 描述了我的用例。有人可以让我知道我哪里出错了。谢谢

Answer 1

http://plnkr.co/edit/7YR5R4aTFWDelwFDz7jV?p=preview

我已经更改了你的 selectpicker 指令。它正在等待选项数据加载 + angular 的更多时间，以便它可以重建 select。只有在那之后我才调用 select-bootstrap 插件。并且指令 restrict 从 C 更改为 A.

angular.module('emfModule')
.directive('selectpicker', function($timeout) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {

      var $el = $(element);

      var unsubscribe = scope.$watch(attrs.selectpickerOptions, function(opts) {
        if (opts) {
          $timeout(function() {
            $el.selectpicker({
              style: 'btn-default',
              size: false
            });
            unsubscribe();
          });
        }
      })

    }
  };
});

这是你的元素。我删除了 class selectpicker 因为我不想 select-bootstrap 调用他自己。

<select title="Select" ng-options="c.login  for c in Users" ng-model="login" name="login" selectpicker="" selectpicker-options="Users" class="form-control input-sm">
   <option value="">-- choose user --</option>
</select>

Bootstrap-Select 带有 Angular JS 和 ajax 数据的插件不工作

Bootstrap-Select Plugin with Angular JS and ajax data not working

twitter-bootstrap

angularjs

angularjs-directive

angularjs-scope

bootstrap-select