短版
為確保Angular應用在IE上能夠運作請確認:
1. 在IE7或更早的版本上polyfill JSON.stringify。你可以使用JSON2或JSON3來polyfills。
<!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>
2. 在連接處將id="ng-app"加入根元素,使用ng-app屬性
<!doctype html> <html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName"> ... </html>
3. 你不能使用自訂的元素標記,像 4. 如果你必需要用自訂元素標記,然後你必須採取以下步驟以確保IE8及之前版本都能用: 5. 使用ng-style標記來取代style="{{ someCss }}"。後續的版本能夠在Chrome和Firefox下工作但不能在IE版本<=11下工作(在撰寫本文時的最新版本)。 版本資訊 IE對非標準的標籤元素有很多問題。這些問題可以歸為兩大類別,每一類別都有自己的解決方案。 好消息是這些限制僅適用於元素標記名稱並不適用於元素屬性名稱。因此,在IE中並不需要特別的處理: 假如你使用HTML的未知標記mytag(my:tag或my-tag結果是相同的): 應該解析出如下的DOM: 預期的行為是BODY元素有一個mytag子元素,它帶有一些文字。 但是在IE中不是這樣的(如果沒有包含上面的修訂) 在IE中,BODY元素有三個子元素: 1,一個自關閉的mytag。例如自關閉標籤 2,一個文字節點some text。在上面這應該是mytag的子元素,而不是同儕標籤 3.一個損壞的自關閉的/mytag。這是一個損壞的元素因為元素名稱是不允許帶/字元的。另外,這種子關閉的元素並不是DOM的一部分,它只是用來描述DOM的結構。 CSS風格的自訂標記命名 為確保CSS選擇器能夠在自訂元素上運作,自訂元素的名稱必須預先使用document.createElement('my-tag')創建,不需顧慮XML的命名空間。
<!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>
重要部分是:
好消息
如果我不這樣做,會發生什麼事?
<html>
<body>
<mytag>some text</mytag>
</body>
</html>
#document
+- HTML
+- BODY
+- mytag
+- #text: some text
#document
+- HTML
+- BODY
+- mytag
+- #text: some text
+- /mytag
。 /是可選的,但是
標籤是不允許有子元素的,瀏覽器將
some text視為三個同儕的標籤,而some text並不是
的子元素。
<html xmlns:ng="needed for ng: namespace">
<head>
<!--[if lte IE 8]>
<script>
// 需要确认ng-include被正常解析
document.createElement('ng-include');
// 需求启用CSS引用
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>