歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

AngularJS 的 IE 兼容性

備注:AngularJS 1.3拋棄了對IE8的支持。可以在我們的博客上了解更多內容。AngularJS 1.2將繼續支持IE8,但核心團隊已經不打算在解決IE8及之前版本的問題上花時間。

本文檔介紹了互聯網浏覽器(IE)在處理自定義HTML標簽及屬性時的特點。如果你正計劃在IE8或更早的浏覽器上部署Angular應用請閱讀本文。

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

我們不在IE8及之前的浏覽器上運行測試。一些AngularJS的功能子集也許能夠在在這些浏覽器上工作,但這將由你來測試並決定它在你的特定應用上是否工作。

帶你走近AngularJS系列

  1. 帶你走近AngularJS - 基本功能介紹 http://www.linuxidc.com/Linux/2014-05/102140.htm
  2. 帶你走近AngularJS - 體驗指令實例 http://www.linuxidc.com/Linux/2014-05/102141.htm
  3. 帶你走近AngularJS - 創建自定義指令 http://www.linuxidc.com/Linux/2014-05/102142.htm

如何在 AngularJS 中對控制器進行單元測試 http://www.linuxidc.com/Linux/2013-12/94166.htm

AngularJS 之 Factory vs Service vs Provider http://www.linuxidc.com/Linux/2014-05/101475.htm

短版本

為確保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標記來替代。後續的版本能夠在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>

更多詳情見請繼續閱讀下一頁的精彩內容: http://www.linuxidc.com/Linux/2014-07/104004p2.htm

Copyright © Linux教程網 All Rights Reserved