angular1.2針對ie8的兼容問題

時間 2019-11-16

標籤 angular1.2 angular 針對 ie8 兼容問題欄目 AngularJS 简体版

原文原文鏈接

AngularJS 1.3拋棄了對IE8的支持，但AngularJS 1.2將繼續支持IE8，但核心團隊已經不打算在解決IE8及以前版本的問題上花時間。本文檔介紹了互聯網瀏覽器（IE）在處理自定義HTML標籤及屬性時的特色。若是你正計劃在IE8或更早的瀏覽器上部署Angular應用請閱讀本文。html

項目目前支持且將嘗試修復IE9以上的bug 。持續集成服務器在IE9，IE10和IE11上運行全部的測試。詳細內容參加Travis CI及ci.angularjs.org。angularjs

咱們不在IE8及以前的瀏覽器上運行測試。一些AngularJS的功能子集也許可以在在這些瀏覽器上工做，但這將由你來測試並決定它在你的特定應用上是否工做。Angular應用在IE上可以工做請確認：json

短版本

爲確保Angular應用在IE上可以工做請確認：瀏覽器

1. 在IE7或更早的版本上polyfill JSON.stringify。你能夠使用JSON2或JSON3來polyfills。服務器

<!doctype html>
<html xmlns:ng="http://angularjs.org">
    <head>
      
    </head>
    <body>
      ...
    </body>
</html>app

2. 在鏈接處將id="ng-app"添加到根元素，使用ng-app屬性ide

<!doctype html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName">
...
</html>測試

3. 你不能使用自定義的元素標記，像<ng:view>(使用屬性版本<div ng-view>來代替)，或spa

4. 若是你必須要用自定義元素標記，而後你必須採起如下步驟以確保IE8及以前版本都能用：.net

<!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下工做（在撰寫本文時的最新版本）。

重要部分是:

xmlns:ng- 命名空間- 你須要爲每個自定義標籤指定一個命名空間。

document.createElement(yourTagName)- 建立自定義標籤名 - 由於這只是對舊版本IE的問題，因此你須要指定加載條件。對於每個沒有命名空間而且在HTML中沒有定義的標籤，你須要提早聲明以使得IE識別。

版本信息

IE對非標準的標籤元素有不少問題。這些問題能夠歸爲兩大類別，每一類別都有本身的解決辦法。

若是標籤名以my：開頭那麼他會被當作XML命名空間而且必須有對應的命名空間聲明<html xmlns:my="ignored">
若是標籤沒有：符號可是不是標準HTML標籤，那麼必須提早使用document.createElement('my-tag')建立。
I若是你計劃用CSS選擇器改變自定義標籤的樣式，那麼無論有沒有命名空間你都得提早用document.createElement('my-tag')建立.

好消息

好消息是這些限制僅僅適用於元素標記名稱並不適用於元素屬性名稱。所以，在IE中並不須要特別的處理：<div my-tag your:tag></div>

若是我不這樣作，會發生什麼？

假如你使用HTML的未知標記mytag（my:tag或者my-tag結果是相同的）：

應該解析出以下的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，一個文本節點some text。在上面這應該是mytag的子元素，而不是同輩標籤
3.一個損壞的自關閉的/mytag。這是一個損壞的元素由於元素名稱是不容許帶/字符的。另外，這種子關閉的元素並非DOM的一部分，它僅僅是用於描述DOM的結構。

CSS風格的自定義標記命名

爲確保CSS選擇器可以在自定義元素上工做，自定義元素的名稱必須預先使用document.createElement('my-tag')建立，不需顧慮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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。