twitter-bootstrap - twitter bootstrap手风琴IE 9选择框的麻烦

Question

我正在使用 angularJS 和 twitter 引导程序。在我的 html 页面中，我使用的是手风琴，而在手风琴的内容中，我有一个选择框。它适用于 firfox、ie10、chrome ... 但在 IE9 中它会切断选择框中的文本。它只显示预选值文本的第一个字母。如果我单击选择框，我可以看到整个文本。

谁能告诉我，如何解决这个问题？这似乎是手风琴的问题，因为如果我将选择框放在手风琴之外，选择框也可以在 IE9 中使用。

Answer 1

我遇到了一个类似的问题（AngularJS 1.2.x），其中选择下拉列表是用一个空的“请选择”选项定义的，然后用从 REST API 返回的值进行更新；然后它会根据从另一个后续 REST 调用接收到的数据选择一个初始值，所有这些都在页面加载时完成。

我认为所有异步更新都混淆了 IE9 对选择框的呈现（手风琴组件的呈现可能导致类似的情况）。在我们的例子中，它基本上会保持初始“请选择”选项的可见文本宽度，切断较长的新选择的初始项目（尽管如果用户与控件交互，它会重新呈现并自行解决）。

在 IE9 中，通过在所选选项的文本末尾添加一个空格来触发它的重新渲染来解决。使用类似于以下的代码，它扩展了 angular 的内置 select 指令：

(function() {
  "use strict";

  angular.module('ngBrowserFixes', [])
    .config(['$provide', Decorate]);

  function Decorate($provide) {

    if(window.navigator.userAgent.indexOf("MSIE 9") !== -1) {
      $provide.decorator('selectDirective',
        ['$delegate', '$timeout', selectDirectiveDecorator]);
    }

    function selectDirectiveDecorator($delegate, $timeout) {
      var directive = $delegate[0],
        link = directive.link;

      directive.compile = function newCompile() {
        return function newLink(scope, element, attrs, ctrl) {
          link.apply(this, arguments);
          var option;

          $timeout(addSpace, 0, false);

          // adding a space to the selected option forces ie9 to
          // do a re-render at the correct width
          function addSpace() {
            if(element[0].selectedIndex === -1) {
              return;
            }

            //options weren't available prior to the timeout delay
            option = element[0].options[element[0].selectedIndex]; 
            option.text += " ";
            scope.$evalAsync(removeSpace);
          }

          // tidy up (optional)
          function removeSpace() {
            option.text = option.text.replace(/\s+$/, '');
          }
        };
      };

      return $delegate;
    }

  }
})();