6

我喜欢Bootstrap-Select并且我目前正在通过另一个用户发出的指令的帮助来使用它，joaoneto/angular-bootstrap-select并且它按预期工作，除非我尝试用包装器填充我的<select>元素，$http或者在我的情况下是dataService包装器。我似乎遇到了一些时间问题，数据是在selectpicker显示/刷新之后出现的，然后我最终得到了一个空的 Bootstrap-Select 列表。尽管使用 Firebug，我确实看到了 now hidden 中的值列表<select>。如果我然后进入控制台并手动执行$('.selectpicker').selectpicker('refresh')它然后工作。
我通过打补丁并在.selectpicker('refresh')内部添加一个来临时工作，$timeout但你知道这并不理想，因为我们jQuery直接在 ngController 中使用......哎呀！

因此，我相信该指令可能缺少观察者，或者至少缺少一些触发ngModel更改或更新的东西。

html示例代码：

<div class="col-sm-5">
    <select name="language" class="form-control show-tick" 
        ng-model="vm.profile.language" 
        selectpicker data-live-search="true"
        ng-options="language.value as language.name for language in vm.languages">
    </select>
    <!-- also tried with an ng-repeat, which has the same effect -->
</div>

然后在我的 Angular 控制器中：

// get list of languages from DB
dataService
    .getLanguages()
    .then(function(data) {  
        vm.languages = data;

        // need a timeout patch to properly refresh the Bootstrap-Select selectpicker 
        // not so good to use this inside an ngController but it's the only working way I have found
        $timeout(function() {
            $('.selectpicker, select[selectpicker]').selectpicker('refresh');
        }, 1);
    });

这是 (joaoneto) 在GitHub 上为 Angular-Bootstrap-Select制定的指令

function selectpickerDirective($parse, $timeout) {
  return {
    restrict: 'A',
    priority: 1000,
    link: function (scope, element, attrs) {
      function refresh(newVal) {
        scope.$applyAsync(function () {
          if (attrs.ngOptions && /track by/.test(attrs.ngOptions)) element.val(newVal);
          element.selectpicker('refresh');
        });
      }

      attrs.$observe('spTheme', function (val) {
        $timeout(function () {
          element.data('selectpicker').$button.removeClass(function (i, c) {
            return (c.match(/(^|\s)?btn-\S+/g) || []).join(' ');
          });
          element.selectpicker('setStyle', val);
        });
      });

      $timeout(function () {
        element.selectpicker($parse(attrs.selectpicker)());
        element.selectpicker('refresh');
      });

      if (attrs.ngModel) {
        scope.$watch(attrs.ngModel, refresh, true);
      }

      if (attrs.ngDisabled) {
        scope.$watch(attrs.ngDisabled, refresh, true);
      }

      scope.$on('$destroy', function () {
        $timeout(function () {
          element.selectpicker('destroy');
        });
      });
    }
  };
}
4

2 回答 2

9

angular-bootstrap-select 指令的一个问题是它只监视ngModel，而不是实际填充选择中选项的对象。例如，如果默认vm.profile.language设置为''，并且vm.languages有一个''选项，则选择不会使用新选项更新，因为ngModel保持不变。我selectModel为选择添加了一个属性，并稍微修改了 angular-bootstrap-select 代码。

<div class="col-sm-5">
    <select name="language" class="form-control show-tick" 
        ng-model="vm.profile.language" 
        select-model="vm.languages"
        selectpicker data-live-search="true"
        ng-options="language.value as language.name for language in vm.languages">
    </select>
</div>

然后，在 angular-bootstrap-select 代码中，我添加了

if (attrs.selectModel) {
    scope.$watch(attrs.selectModel, refresh, true);
}

现在，当vm.languages更新时，选择也会更新。更好的方法可能是简单地检测应该通过 using 监视哪个对象ngOptions，但使用此方法也允许ngRepeat在 select 中使用。

编辑：

使用的替代方法selectModel是自动检测要观看的对象ngOptions。

if (attrs.ngOptions && / in /.test(attrs.ngOptions)) {
    scope.$watch(attrs.ngOptions.split(' in ')[1], refresh, true);
}

编辑2：

与其使用该refresh函数，不如只element.selectpicker('refresh');再次调用，因为您只想在ngModel更改时实际更新 select 的值。我遇到了一种情况，其中选项列表正在更新，并且选择的值发生了变化，但模型没有改变，因此它与选择器不匹配。这为我解决了它：

if (attrs.ngOptions && / in /.test(attrs.ngOptions)) {
    scope.$watch(attrs.ngOptions.split(' in ')[1], function() {
        scope.$applyAsync(function () {
            element.selectpicker('refresh');
        });
    }, true);
}
于 2015-02-06T22:43:03.340 回答
0

嗯，这是一个旧的......但我不得不使用它。这是我在指令的 link(..) 函数中添加的内容：

            scope.$watch(
            _ => element[0].innerHTML,
            (newVal, oldVal) => {
                if (newVal !== oldVal)
                {
                    element.selectpicker('refresh');
                }
            }
            )
于 2021-09-22T11:31:25.287 回答