Question

我正在使用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>

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

Answer 1

由于没有人回答这个问题，我将发布我在IE8中解决问题的方法。

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

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

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

当页面加载时，我使用指令（selected_country2）之外的元素值初始化了accordion指令中的模型（selected_country）。这样，国家的下拉就会填充来自该指令之外的元素的价值。当用户更改国家/地区下拉列表时，会有一个范围。$ watch语句，它会更新accordion指令外部下拉列表的值，并在POST发生时使用更新后的值进入服务器。

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

Angular UI Bootstrap 0.8.0手风琴在IE8中没有显示选定的值

1 个答案: