Angular UI Bootstrap 0.8.0手风琴未显示IE8中的选定值

Question

I'm using Angular UI Bootstrap 0.8.0 along with AngularJS 1.2.15 to display some content in accordions. 我正在使用Angular UI Bootstrap 0.8.0和AngularJS 1.2.15来显示手风琴中的某些内容。 One of the accordions contain a form with input/select elements. 一种手风琴包含带有输入/选择元素的形式。 I'm having a select dropdown with a list of countries with a ng-model on it to show the selected value. 我正在选择下拉列表，上面有一个带有ng模型的国家/地区列表，以显示所选值。 ng-model is initialized by a custom directive 'initialize-model' on the select element which initializes the model to the value attribute of the HTML tag. ng-model由select元素上的自定义指令“ initialize-model”初始化，该指令将模型初始化为HTML标签的value属性。 The options are generated using the server side template(ZPT). 使用服务器端模板（ZPT）生成选项。 In every other browser when I select a country, save the form and open the page again I see the selected country but in IE8 the ng-model isn't set properly on page load and there is no country selected. 在选择其他国家/地区的所有其他浏览器中，保存表单并再次打开页面时，我会看到所选的国家/地区，但在IE8中，加载页面时未正确设置ng-model，因此未选择任何国家/地区。 If I take the select dropdown out of the accordion IE8 displays the selected country. 如果我从手风琴中删除选择下拉列表，则IE8将显示所选国家/地区。

I've followed angular's IE practices to include document.createElement('accordion');document.createElement('accordion-group');document.createElement('accordion-heading'); 我遵循了angular的IE实践，包括document.createElement（'accordion'）; document.createElement（'accordion-group'）; document.createElement（'accordion-heading'）; for IE8 but still IE8 doesn't show the selected value. 对于IE8，但IE8仍不显示所选值。 When I open developer tools for IE8 and inspect the elements I can see the option in the select being shown as selected but ng-model doesn't get set to the selected value. 当我打开IE8的开发人员工具并检查元素时，我可以看到选择中的选项显示为已选中，但是ng-model并未设置为所选值。 I don't know what's making ng-model be assigned to selected value if it's outside accordion? 我不知道是什么使ng-model在手风琴外面分配给选定的值？ I've also tried including jquery before angular source but it still doesn't solve the issue. 我也尝试过在角度来源之前加入jquery，但仍然无法解决问题。

This is how the template looks like: 模板如下所示：

<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>

I appreciate any help in this regard! 感谢您在这方面的帮助！

Answer 1

Since nobody answered the question I'm going to post what I did to get around the problem in IE8. 由于没有人回答这个问题，因此我将发布如何解决IE8中的问题。

I created another HTML element outside the scope of my UI-Bootstrap accordion like: 我在UI-Bootstrap手风琴的范围之外创建了另一个HTML元素，例如：

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

the initialize-model directive initialized the value of this dropdown coming from the server. initialize-model指令初始化了来自服务器的此下拉列表的值。

When the page loaded I initialized the model(selected_country) inside the accordion directive with the value of the element outside the directive(selected_country2). 加载页面时，我使用手风琴指令内的元素值（selected_country2）初始化了手风琴指令内的模型（selected_country）。 That way the dropdown for country was populated with the value coming from the element outside the directive. 这样，国家/地区的下拉菜单中就会填充来自指令外部元素的值。 When the user changes the country dropdown there is a scope.$watch statement which updates the value of the dropdown outside the accordion directive and it goes to server when a POST happens with the updated value. 当用户更改国家/地区下拉列表时，将显示一个scope。$ watch语句，该语句可在手风琴指令之外更新下拉列表的值，并且在使用更新后的值进行POST时将其转到服务器。

PS: I did look at UI-bootstrap website and it doesn't officially support IE8. PS：我确实查看过UI-bootstrap网站，但它并不正式支持IE8。

Angular UI Bootstrap 0.8.0手风琴未显示IE8中的选定值

问题描述

1 个解决方案

解决方案1
0 2014-11-17 23:10:15

Angular UI Bootstrap 0.8.0手风琴未显示IE8中的选定值

问题描述

1 个解决方案

解决方案1 0 2014-11-17 23:10:15

解决方案1
0 2014-11-17 23:10:15