測試IE瀏覽器對JavaScript的AngularJS的兼容性

短版本
為確保Angular應用在IE上能夠工作請確認:
1. 在IE7或更早的版本上polyfill JSON.stringify 。你可以使用JSON2或JSON3來polyfills 。

測試IE瀏覽器對JavaScript的AngularJS的兼容性

2. 在連接處將id="ng-app"添加到根元素,使用ng-app屬性
測試IE瀏覽器對JavaScript的AngularJS的兼容性

3. 你不能使用自定義的元素標記,像(使用屬性版本來代替),或
【測試IE瀏覽器對JavaScript的AngularJS的兼容性】4. 如果你必需要用自定義元素標記,然后你必須采取以下步驟以確保IE8及之前版本都能用:
測試IE瀏覽器對JavaScript的AngularJS的兼容性

5. 使用ng-style標記來替代style="{{ someCss }}" 。后續的版本能夠在Chrome和Firefox下工作但不能在IE版本<=11下工作(在撰寫本文時的最新版本) 。
重要部分是:
xmlns:ng- 命名空間- 你需要為每一個自定義標簽指定一個命名空間 。
document.createElement(yourTagName)- 創建自定義標簽名 - 因為這只是對舊版本IE的問題,所以你需要指定加載條件 。對于每一個沒有命名空間并且在HTML中沒有定義的標簽,你需要提前聲明以使得IE識別 。
版本信息
IE對非標準的標簽元素有很多問題 。這些問題可以歸為兩大類別,每一類別都有自己的解決辦法 。
如果標簽名以my:開頭那么他會被當做XML命名空間并且必須有對應的命名空間聲明
如果標簽沒有:符號但是不是標準HTML標簽,那么必須提前使用document.createElement('my-tag')創建 。
如果你計劃用CSS選擇器改變自定義標簽的樣式 , 那么不管有沒有命名空間你都得提前用document.createElement('my-tag')創建.
好消息
好消息是這些限制僅僅適用于元素標記名稱并不適用于元素屬性名稱 。因此,在IE中并不需要特別的處理:
如果我不這樣做,會發生什么?
假如你使用HTML的未知標記mytag(my:tag或者my-tag結果是相同的):
測試IE瀏覽器對JavaScript的AngularJS的兼容性

應該解析出如下的DOM:
測試IE瀏覽器對JavaScript的AngularJS的兼容性

預期的行為是BODY元素有一個mytag子元素,它帶有一些文字 。
但是在IE中不是這樣的(如果沒有包含上面的修訂)
測試IE瀏覽器對JavaScript的AngularJS的兼容性

在IE中,BODY元素有三個子元素:
1,一個自關閉的mytag 。例如自關閉標簽
。/是可選的,但是
標簽是不允許有子元素的 , 瀏覽器將
some text
視為三個同輩的標簽,而some text并不是
的子元素 。
2,一個文本節點some text 。在上面這應該是mytag的子元素,而不是同輩標簽
3.一個損壞的自關閉的/mytag 。這是一個損壞的元素因為元素名稱是不允許帶/字符的 。另外,這種子關閉的元素并不是DOM的一部分,它僅僅是用于描述DOM的結構 。
CSS風格的自定義標記命名
為確保CSS選擇器能夠在自定義元素上工作,自定義元素的名稱必須預先使用document.createElement('my-tag')創建,不需顧慮XML的命名空間 。
測試IE瀏覽器對JavaScript的AngularJS的兼容性

相關經驗推薦