短版本
為確保Angular應用在IE上能夠工作請確認：
1. 在IE7或更早的版本上polyfill JSON.stringify。你可以使用JSON2或JSON3來polyfills。
?| 1 2 3 4 5 6 7 8 9 10 11 | <!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屬性
| 1 2 3 4 | <!doctype html> <html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName"> ... </html> |
3. 你不能使用自訂的元素標記，像<ng:view>(使用屬性版本<div ng-view>來代替)，或
4. 如果你必需要用自訂元素標記，然後你必須採取以下步驟以確保IE8及之前版本都能用：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!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> |
5. 使用ng-style標記來替代style="{{ someCss }}"。後續的版本能夠在Chrome和Firefox下工作但不能在IE版本＜＝11下工作（在撰寫本文時的最新版本）。
重要部分是:
版本資訊
IE對非標準的標籤元素有很多問題。這些問題可以歸為兩大類別，每一類別都有自己的解決辦法。
好訊息
好訊息是這些限制僅僅適用於元素標記名稱並不適用於元素屬性名稱。因此，在IE中並不需要特別的處理：<div my-tag your:tag></div>
如果我不這樣做，會發生什嗎？
假如你使用HTML的未知標記mytag（my:tag或者my-tag結果是相同的）：
?| 1 2 3 4 5 6 | <html> <body> <mytag>some text</mytag> </body> </html> |
應該解析出如下的DOM：
| 1 2 3 4 5 | #document +- HTML +- BODY +- mytag +- #text: some text |
預期的行為是BODY元素有一個mytag子項目，它帶有一些文字。
但是在IE中不是這樣的（如果沒有包含上面的修訂）
| 1 2 3 4 5 6 | #document +- HTML +- BODY +- mytag +- #text: some text +- /mytag |
在IE中，BODY元素有三個子項目：
1，一個自關閉的mytag。例如自關閉標籤
。/是可選的，但是
標籤是不允許有子項目的，瀏覽器將
some text
視為三個同輩的標籤，而some text並不是
的子項目。
2，一個文本節點some text。在上面這應該是mytag的子項目，而不是同輩標籤
3.一個損壞的自關閉的/mytag。這是一個損壞的元素因為元素名稱是不允許帶/字元的。另外，這種子關閉的元素並不是DOM的一部分，它僅僅是用於描述DOM的結構。
CSS風格的自訂標籤命名
為確保CSS選取器能夠在自訂元素上工作，自訂元素的名稱必須預先使用document.createElement('my-tag')建立，不需顧慮XML的命名空間。
?| 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 | <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> |
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
