Question

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

任何人都可以告诉我，如何解决这个问题？它似乎是手风琴的一个问题，因为如果我将选择框放在手风琴之外，那么选择框也适用于IE9。

Answer 1

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

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

通过在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;
    }

  }
})();

twitter引导手风琴IE 9与selectbox的麻烦

1 个答案: