Angular Bootstrap-Select 刷新时间问题

Question

我喜欢 Bootstrap-Select，我目前正在通过另一个用户 joaoneto/angular-bootstrap-select 的指令的帮助使用它，它按预期工作，除非我尝试填写我的 <select>带有 $http 的元素，或者在我的例子中是 dataService 包装器。我似乎遇到了一些时间问题，数据是在 selectpicker 得到 displayed/refreshed 之后出现的，然后我最终得到一个空的 Bootstrap-Select 列表..虽然有 Firebug，我确实在现在隐藏的 <select> 中看到了值列表。如果我然后进入控制台并手动执行 $('.selectpicker').selectpicker('refresh') 它然后工作。
我通过打补丁并在 $timeout 中添加 .selectpicker('refresh') 使其暂时工作，但如您所知，这并不理想，因为我们直接在 ngController 中使用 jQuery ...哎哟！

所以我相信该指令可能缺少观察者或至少缺少触发 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 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，而不是实际填充选项的对象select。例如，如果 vm.profile.language 默认设置为 ''，并且 vm.languages 有一个 '' 选项，则 select 不会更新为新选项，因为 ngModel 保持不变。我在select中添加了一个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 更新时，select 也会更新。更好的方法可能是使用 ngOptions 简单地检测应该监视哪个对象，但使用此方法也允许在 select 中使用 ngRepeat。

编辑：

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

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

编辑 2：

与其使用 refresh 函数，您最好再次调用 element.selectpicker('refresh');，因为您只想在 select 时实际更新 select 的值=14=]变化。我运行进入了一个场景，其中选项列表正在更新，并且 select 的值发生了变化，但模型没有改变，因此它与 select选择器。这为我解决了：

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

Answer 2

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

            scope.$watch(
            _ => element[0].innerHTML,
            (newVal, oldVal) => {
                if (newVal !== oldVal)
                {
                    element.selectpicker('refresh');
                }
            }
            )

Angular Bootstrap-Select 刷新时间问题

Angular Bootstrap-Select timing issue to refresh

angularjs

angularjs-directive

angularjs-ng-repeat

bootstrap-select