twitter引导程序手风琴IE 9的selectbox出现问题

Question

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

有人能告诉我，如何解决这个问题吗？手风琴似乎有问题，因为如果我把selectbox放在手风琴外面，selectbox在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;
    }
  }
})();