forked from angular/code.angularjs.org
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathie.html
177 lines (169 loc) · 7.82 KB
/
ie.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<a href='https://github.com/angular/angular.js/edit/v1.2.x/docs/content/guide/ie.ngdoc?message=docs(guide%2FInternet Explorer Compatibility)%3A%20describe%20your%20change...' class='improve-docs btn btn-primary'><i class="glyphicon glyphicon-edit"> </i>Improve this Doc</a>
<h1 id="internet-explorer-compatibility">Internet Explorer Compatibility</h1>
<div class="alert alert-warning">
<strong>Note:</strong> AngularJS 1.3 is dropping support for IE8. Read more about it on
<a href="http://blog.angularjs.org/2013/12/angularjs-13-new-release-approaches.html">our blog</a>.
AngularJS 1.2 will continue to support IE8, but the core team does not plan to spend time
addressing issues specific to IE8 or earlier.
</div>
<p>This document describes the Internet Explorer (IE) idiosyncrasies when dealing with custom HTML
attributes and tags. Read this document if you are planning on deploying your Angular application
on IE8 or earlier.</p>
<p>The project currently supports and will attempt to fix bugs for IE9 and above. The continuous
integration server runs all the tests against IE9, IE10, and IE11. See
<a href="https://travis-ci.org/angular/angular.js">Travis CI</a> and
<a href="http://ci.angularjs.org">ci.angularjs.org</a>.</p>
<p>We do not run tests on IE8 and below. A subset of the AngularJS functionality may work on these
browsers, but it is up to you to test and decide whether it works for your particular app.</p>
<h2 id="short-version">Short Version</h2>
<p>To make your Angular application work on IE please make sure that:</p>
<ol>
<li><p>You polyfill JSON.stringify for IE7 and below. You can use
<a href="https://github.com/douglascrockford/JSON-js">JSON2</a> or
<a href="http://bestiejs.github.com/json3/">JSON3</a> polyfills for this.</p>
<pre><code class="lang-html"><!doctype html>
<html xmlns:ng="http://angularjs.org">
<head>
<!--[if lte IE 7]>
<script src="/path/to/json2.js"></script>
<![endif]-->
</head>
<body>
...
</body>
</html>
</code></pre>
</li>
<li><p>add <code>id="ng-app"</code> to the root element in conjunction with <code>ng-app</code> attribute</p>
<pre><code class="lang-html"><!doctype html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName">
...
</html>
</code></pre>
</li>
<li><p>you <strong>do not</strong> use custom element tags such as <code><ng:view></code> (use the attribute version
<code><div ng-view></code> instead), or</p>
</li>
<li><p>if you <strong>do use</strong> custom element tags, then you must take these steps to make IE 8 and below happy:</p>
<pre><code class="lang-html"><!doctype html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName">
<head>
<!--[if lte IE 8]>
<script>
document.createElement('ng-include');
document.createElement('ng-pluralize');
document.createElement('ng-view');
// Optionally these for CSS
document.createElement('ng:include');
document.createElement('ng:pluralize');
document.createElement('ng:view');
</script>
<![endif]-->
</head>
<body>
...
</body>
</html>
</code></pre>
</li>
<li>Use <code>ng-style</code> tags instead of <code>style="{{ someCss }}"</code>. The later works in Chrome and Firefox
but does not work in Internet Explorer <= 11 (the most recent version at time of writing).</li>
</ol>
<p>The <strong>important</strong> parts are:</p>
<ul>
<li><p><code>xmlns:ng</code> - <em>namespace</em> - you need one namespace for each custom tag you are planning on
using.</p>
</li>
<li><p><code>document.createElement(yourTagName)</code> - <em>creation of custom tag names</em> - Since this is an
issue only for older version of IE you need to load it conditionally. For each tag which does
not have namespace and which is not defined in HTML you need to pre-declare it to make IE
happy.</p>
</li>
</ul>
<h2 id="long-version">Long Version</h2>
<p>IE has issues with element tag names which are not standard HTML tag names. These fall into two
categories, and each category has its own fix.</p>
<ul>
<li><p>If the tag name starts with <code>my:</code> prefix then it is considered an XML namespace and must
have corresponding namespace declaration on <code><html xmlns:my="ignored"></code></p>
</li>
<li><p>If the tag has no <code>:</code> but it is not a standard HTML tag, then it must be pre-created using
<code>document.createElement('my-tag')</code></p>
</li>
<li><p>If you are planning on styling the custom tag with CSS selectors, then it must be
pre-created using <code>document.createElement('my-tag')</code> regardless of XML namespace.</p>
</li>
</ul>
<h2 id="the-good-news">The Good News</h2>
<p>The good news is that these restrictions only apply to element tag names, and not to element
attribute names. So this requires no special handling in IE: <code><div my-tag your:tag></div></code>.</p>
<h2 id="what-happens-if-i-fail-to-do-this-">What happens if I fail to do this?</h2>
<p>Suppose you have HTML with unknown tag <code>mytag</code> (this could also be <code>my:tag</code> or <code>my-tag</code> with same
result):</p>
<pre><code class="lang-html"><html>
<body>
<mytag>some text</mytag>
</body>
</html>
</code></pre>
<p>It should parse into the following DOM:</p>
<pre><code>#document
+- HTML
+- BODY
+- mytag
+- #text: some text
</code></pre>
<p>The expected behavior is that the <code>BODY</code> element has a child element <code>mytag</code>, which in turn has
the text <code>some text</code>.</p>
<p>But this is not what IE does (if the above fixes are not included):</p>
<pre><code>#document
+- HTML
+- BODY
+- mytag
+- #text: some text
+- /mytag
</code></pre>
<p>In IE, the behavior is that the <code>BODY</code> element has three children:</p>
<ol>
<li><p>A self closing <code>mytag</code>. Example of self closing tag is <code><br/></code>. The trailing <code>/</code> is optional,
but the <code><br></code> tag is not allowed to have any children, and browsers consider <code><br>some
text</br></code> as three siblings not a <code><br></code> with <code>some text</code> as child.</p>
</li>
<li><p>A text node with <code>some text</code>. This should have been a child of <code>mytag</code> above, not a sibling.</p>
</li>
<li><p>A corrupt self closing <code>/mytag</code>. This is corrupt since element names are not allowed to have
the <code>/</code> character. Furthermore this closing element should not be part of the DOM since it is
only used to delineate the structure of the DOM.</p>
</li>
</ol>
<h2 id="css-styling-of-custom-tag-names">CSS Styling of Custom Tag Names</h2>
<p>To make CSS selectors work with custom elements, the custom element name must be pre-created with
<code>document.createElement('my-tag')</code> regardless of XML namespace.</p>
<pre><code class="lang-html"><html xmlns:ng="needed for ng: namespace">
<head>
<!--[if lte IE 8]>
<script>
// needed to make ng-include parse properly
document.createElement('ng-include');
// needed to enable CSS reference
document.createElement('ng:view');
</script>
<![endif]-->
<style>
ng\:view {
display: block;
border: 1px solid red;
}
ng-include {
display: block;
border: 1px solid blue;
}
</style>
</head>
<body>
<ng:view></ng:view>
<ng-include></ng-include>
...
</body>
</html>
</code></pre>