2

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 插件时，它失败了。我尝试使用角度指令将其包装起来，但没有帮助。上面的 Plunk 描述了我的用例。有人可以让我知道我哪里出错了。谢谢你

4

1 回答 1

2

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

我已经改变了你的 selectpicker 指令。它一直在等待选项数据加载+角度的更多时间，以便它可以重建选择。只有在那之后我才调用 select-bootstrap 插件。并且指令限制也从 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();
          });
        }
      })

    }
  };
});

这是你的元素。我已经删除了类 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>

于 2015-01-14T22:22:28.493 回答