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将数据加载到角度应用程序的下拉列表中。数据正在通过，我能够填充控件，但是当我尝试使用bootstrap-select插件时，它会失败。我尝试使用角度指令将其包装但没有帮助。上面的Plunk描述了我的用例。有人能让我知道我哪里出错了。谢谢

Answer 1

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>

使用Angular JS和ajax数据的Bootstrap-Select插件不起作用

1 个答案: