Angular UI Bootstrap 0.8.0 accordion not showing selected value in IE8
I'm using Angular UI Bootstrap 0.8.0 along with AngularJS 1.2.15 to display some content in accordions. 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-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. The options are generated using the server side template(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. If I take the select dropdown out of the accordion IE8 displays the selected country.
I've followed angular's IE practices to include document.createElement('accordion');document.createElement('accordion-group');document.createElement('accordion-heading'); for IE8 but still IE8 doesn't show the selected value. 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. I don't know what's making ng-model be assigned to selected value if it's outside accordion? I've also tried including jquery before angular source but it still doesn't solve the issue.
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!
Since nobody answered the question I'm going to post what I did to get around the problem in IE8.
I created another HTML element outside the scope of my UI-Bootstrap accordion like:
<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.
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). 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.
PS: I did look at UI-bootstrap website and it doesn't officially support IE8.
链接地址: http://www.djcxy.com/p/68994.html上一篇: “