UI-Select中可点击区域为10px，位于Bootstrap模态框内。

Question

我有一个Bootstrap弹出框，在其中放了一个ui-select用于标记。 以下是我的例子：

<div class="modal modal-invite">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <ui-select multiple tagging tagging-label="" ng-model="email_list" theme="bootstrap" ng-disabled="disabled" on-select="" on-remove=""  title="Insert your friends email here." >
          <ui-select-match placeholder="Your friends email here...">{{$item}}</ui-select-match>
          <ui-select-choices repeat="email in email_list | filter:$select.search">
            {{email}}
          </ui-select-choices>
        </ui-select>
      </div>
      <div class="modal-footer">
        <button class="btn btn-success">Invite</button>
      </div>
    </div>
  </div>
</div>

我的问题是：当我使用$('modal-invite').modal('show')打开模态框时，占位符（以及可点击区域）的大小为10像素，就像这样：。在单击它之后，它会得到正确的宽度。如何使ui-select在模态框打开时刷新其大小？

- ProGM

---

你尝试过将ui-select的初始化放入模态框打开回调中吗？似乎当模态框第一次打开时，ui-select还没有被初始化。 - Dmitry Shurshilin

@DmitryS 好的，也许我找到了解决方案。我尝试了：$('modal-invite').modal('show') 然后 $scope.$apply();，这似乎有效！ - ProGM

可能是因为，就像Dmitry所说的那样，在页面加载时，ui-select尚未显示。 - eHx

你能提供演示的代码片段吗？ - Usman Arshad

Answer 1

最终我解决了对ui-select源代码的检查。

看起来ui-select会通过$watch监控父元素的宽度来重新计算输入框的尺寸。

因此，为了刷新它，我这样做：

$('.modal-invite').modal('show');
$scope.$apply();

- ProGM

---

我遇到了类似的问题。通过单击按钮调用具有ui-select的div。<button href="#a> <div id="a" modal> <ui select> </div>。不确定何时调用$scope.$apply()。 - Rk R Bairi

Answer 2

我有类似的问题。

我知道修改源文件不是好的做法，最好的方法是从自己的代码中以某种方式定位它，但现在我通过注释源代码中一个设置输入字段为10px的行来解决了它。

在源文件select.js的831行中，注释掉：ctrl.searchInput.css('width', '10px');

- Bjarne Gerhardt-Pedersen