angularjs - Angular Bootstrap-Select 刷新时间问题

Question

我爱 Bootstrap-Select我目前正在通过另一个用户的指令使用它 joaoneto/angular-bootstrap-select 它按预期工作，除非我尝试填充我的 <select>带有 $http 的元素或者在我的情况下是 dataService wrapper 。我似乎遇到了一些时间问题，数据在 selectpicker 之后被显示/刷新，然后我最终有一个空的 Bootstrap-Select 列表..虽然使用 Firebug，我确实看到了现在隐藏的值列表 <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 Controller 中:

// 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 for 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');
        });
      });
    }
  };
}

Answer 1

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更新，选择也将更新。更好的方法可能是使用 ngOptions 简单地检测应该监视哪个对象。 ，但使用此方法允许使用 ngRepeat在一个选择中也是如此。

编辑:

使用 selectModel 的替代方法正在从 ngOptions 自动检测要观看的对象.

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

编辑2:

而不是使用 refresh函数，你最好调用 element.selectpicker('refresh');再次，因为您只想在 ngModel 时实际更新选择的值变化。我遇到了一个场景，选项列表正在更新，选择的值发生了变化，但模型没有改变，因此它与选择选择器不匹配。这为我解决了:

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