測試IE瀏覽器對JavaScript的AngularJS的兼容性
短版本
為確保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. 你不能使用自定義的元素標記，像<ng:view>(使用屬性版本<div ng-view>來代替)，或
4. 如果你必需要用自定義元素標記，然后你必須采取以下步驟以確保IE8及之前版本都能用：
<!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 }}"。后續(xù)的版本能夠在Chrome和Firefox下工作但不能在IE版本＜＝11下工作（在撰寫本文時的最新版本）。
重要部分是:
- xmlns:ng- 命名空間- 你需要為每一個自定義標簽指定一個命名空間。
- document.createElement(yourTagName)- 創(chuàng)建自定義標簽名 - 因為這只是對舊版本IE的問題，所以你需要指定加載條件。對于每一個沒有命名空間并且在HTML中沒有定義的標簽，你需要提前聲明以使得IE識別。
版本信息
IE對非標準的標簽元素有很多問題。這些問題可以歸為兩大類別，每一類別都有自己的解決辦法。
- 如果標簽名以my：開頭那么他會被當做XML命名空間并且必須有對應的命名空間聲明<html xmlns:my="ignored">
- 如果標簽沒有：符號但是不是標準HTML標簽，那么必須提前使用document.createElement('my-tag')創(chuàng)建。
- 如果你計劃用CSS選擇器改變自定義標簽的樣式，那么不管有沒有命名空間你都得提前用document.createElement('my-tag')創(chuàng)建.
好消息
好消息是這些限制僅僅適用于元素標記名稱并不適用于元素屬性名稱。因此，在IE中并不需要特別的處理：<div my-tag your:tag></div>
如果我不這樣做，會發(fā)生什么？
假如你使用HTML的未知標記mytag（my:tag或者my-tag結果是相同的）：
<html> <body> <mytag>some text</mytag> </body> </html>
應該解析出如下的DOM：
#document
+- HTML
+- BODY
+- mytag
+- #text: some text
預期的行為是BODY元素有一個mytag子元素，它帶有一些文字。
但是在IE中不是這樣的（如果沒有包含上面的修訂）
#document
+- HTML
+- BODY
+- mytag
+- #text: some text
+- /mytag
在IE中，BODY元素有三個子元素：
1，一個自關閉的mytag。例如自關閉標簽<br/>。/是可選的，但是<br>標簽是不允許有子元素的，瀏覽器將<br>some text</br>視為三個同輩的標簽，而some text并不是<br>的子元素。
2，一個文本節(jié)點some text。在上面這應該是mytag的子元素，而不是同輩標簽
3.一個損壞的自關閉的/mytag。這是一個損壞的元素因為元素名稱是不允許帶/字符的。另外，這種子關閉的元素并不是DOM的一部分，它僅僅是用于描述DOM的結構。
CSS風格的自定義標記命名
為確保CSS選擇器能夠在自定義元素上工作，自定義元素的名稱必須預先使用document.createElement('my-tag')創(chuàng)建，不需顧慮XML的命名空間。
<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>
相關文章
Facade Service暴露commands簡化代碼邏輯提高可訪問性組合性
在 Angular 應用開發(fā)中,使用 Facade Service 暴露 commands（命令）以及訂閱這些 commands 是一個常見的設計模式,本文將詳細介紹在 Facade Service 中如何實現(xiàn)這一目標,并深入探討相關細節(jié),以及通過實際示例進行說明2023-10-10
AngularJS實現(xiàn)單一頁面內(nèi)設置跳轉(zhuǎn)路由的方法
這篇文章主要介紹了AngularJS實現(xiàn)單一頁面內(nèi)設置跳轉(zhuǎn)路由的方法,結合實例形式分析了AngularJS路由操作相關設置與使用技巧,需要的朋友可以參考下2017-06-06
Angular6 發(fā)送手機驗證碼按鈕倒計時效果實現(xiàn)方法
這篇文章主要介紹了Angular6 發(fā)送手機驗證碼按鈕倒計時效果實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要介紹了使用Angular自定義字段校驗指令的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
angular 表單驗證器驗證的同時限制輸入的實現(xiàn)
表單驗證是經(jīng)常用到一個東西，這篇文章主要介紹了angular 表單驗證器驗證的同時限制輸入的實現(xiàn)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-04-04
本篇文章給大家詳細分析了angularjs中$http異步上傳Excel文件方法，對此有需要的讀者可以學習下。2018-02-02
這篇文章主要介紹了AngularJS入門示例之Hello World,較為詳細的分析了AngularJS程序的原理及Hello World程序的創(chuàng)建步驟,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了AngularJS 2.0入門權威指南的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-10-10
這篇文章主要介紹了使用AngularJS 跨站請求如何解決jsonp請求問題，下面通過本文給大家分享解決辦法，需要的朋友參考下2017-01-01
AngularJS入門教程之 XMLHttpRequest實例講解
本文主要講解 AngularJS XMLHttpRequest,這里給大家整理相關資料并提供實例代碼,有需要的小伙伴參考下2016-07-07