Angular UI Bootstrap 0.8.0 手风琴未在 IE8 中显示所选值答案

【问题标题】：Angular UI Bootstrap 0.8.0 accordion not showing selected value in IE8Angular UI Bootstrap 0.8.0 手风琴未在 IE8 中显示所选值
【发布时间】：2015-01-03 19:31:47
【问题描述】：

我正在使用 Angular UI Bootstrap 0.8.0 和 AngularJS 1.2.15 在手风琴中显示一些内容。其中一个手风琴包含一个带有输入/选择元素的表单。我有一个选择下拉列表，其中列出了带有 ng-model 的国家/地区列表，以显示所选值。 ng-model 由 select 元素上的自定义指令“initialize-model”初始化，该元素将模型初始化为 HTML 标记的 value 属性。这些选项是使用服务器端模板 (ZPT) 生成的。在其他所有浏览器中，当我选择一个国家/地区时，保存表单并再次打开页面，我会看到所选国家/地区，但在 IE8 中，页面加载时 ng-model 设置不正确，并且没有选择国家/地区。如果我从手风琴中取出选择下拉菜单，IE8 会显示所选国家/地区。

我遵循了 Angular 的 IE 实践，包括 document.createElement('accordion');document.createElement('accordion-group');document.createElement('accordion-heading');对于 IE8，但 IE8 仍然不显示所选值。当我打开 IE8 的开发人员工具并检查元素时，我可以看到选择中的选项显示为已选择，但 ng-model 未设置为所选值。如果它在手风琴之外，我不知道是什么让 ng-model 被分配给选定的值？我也尝试在角度源之前包含 jquery，但它仍然不能解决问题。

这是模板的样子：

<html>
<head>
  <!--[if lte IE 8]>
    <script>
      document.createElement('accordion');
      document.createElement('accordion-group');
      document.createElement('accordion-heading');
    </script>
  <![endif]-->
</head>
<body>
  <accordion>
    <accordion-group is-open="showSection">
      <accordion-heading>
        <i ng-class="{'icon-chevron-down': showSection, 'icon-chevron-right': !showSection}"></i>Country Information
      </accordion-heading>
      <select ng-model="selected_country" id="selected_country" name="selected_country" initialize-model>
        <option value="">---------</option>
        <options tal:omit-tag="" tal:repeat="country countries">
          <option tal:attributes="value country/code" tal:content="country/country"></option>
        </options>
      </select>
    </accordion-group>
  </accordion>
</body>
</html>

感谢您在这方面的任何帮助！

【问题讨论】：

标签： javascript angularjs internet-explorer-8 angular-ui-bootstrap

【解决方案1】：

由于没有人回答这个问题，我将发布我为解决 IE8 中的问题所做的工作。

我在 UI-Bootstrap 手风琴范围之外创建了另一个 HTML 元素，例如：

<select ng-model="selected_country2" id="selected_country2" name="selected_country2" initialize-model>

initialize-model 指令初始化了来自服务器的这个下拉列表的值。

当页面加载时，我使用指令之外的元素值初始化了手风琴指令内的模型（selected_country）（selected_country2）。这样，国家的下拉列表中就填充了来自指令外部元素的值。当用户更改国家/地区下拉列表时，会有一个 scope.$watch 语句更新手风琴指令之外的下拉列表的值，并在更新值发生 POST 时转到服务器。

P.S：我确实看过 UI-bootstrap 网站，它并没有正式支持 IE8。

【讨论】：