轉...........
這段時間詳細了解了谷歌新出的MVVM框架angular.js，並直接在本人所從事的項目中使用了。但是使用新東西都是有風險的，這不，采用了新框架的頁面IE7,8各種顯示不出來……心想着難道用以前的辦法重來？不能允許！於是上網查閱了大量資料。終於跑通了，並且知道是怎么回事。
以下面這個IE7,8,9都跑得通的例子說明,重點是紅字的部分：
<!DOCTYPE html>
<html>
<head>
<script src=”app/js/json2.js”></script>
<script src=”app/lib/angular/angular.js”></script>
<script src=”demo.js”></script>
</head>
<body ng-app id=”ng-app” class=”ng-cloak”>
<div ng-controller=”InvoiceCntl”>
<b>Invoice:</b>
<br>
<br>
<table>
<tr><td>Quantity</td><td>Cost</td></tr>
<tr>
<td><input type=”integer” min=”0″ ng-model=”qty” required ></td>
<td><input type=”number” ng-model=”cost” required ></td>
</tr>
</table>
<hr>
<b>Total:</b> {{qty * cost | currency}}
</div>
</body>
</html>
要讓IE7這個渣渣happy,你必須加上json2.js或者其他json文件（IE7沒有原生的支持）。然后，你還需要在申明ng-app腳本的地方特意加上id=”ng-app”,這樣IE7才能識別（因為IE7不支持自建元素）。如此IE7就能跑通了。IE7跑的通，IE8，IE9也沒有問題。
官網上有一個教程例子：phonecat，想必各位想用angular.js的同志都看了。但是作為官網的例子，這貨居然不能在IE7,8下轉。用本人的方法稍微修改一下phonecat的index.html，就也能跑了：
<!DOCTYPE html>
<html lang=”en” >
<head>
<meta charset=”utf-8″>
<!–[if lt IE 9]>
<script src=”http://www.AngularJS.cn/wp-content/themes/angularjs/js/HTML5.js” type=”text/JavaScript”></script>
<![endif]–>
<title>Google Phone Gallery</title>
<link rel=”stylesheet” href=”css/app.css”>
<link rel=”stylesheet” href=”css/bootstrap.css”>
<script src=”js/json2.js”></script>
<script src=”lib/angular/angular.js”></script>
<script src=”js/app.js”></script>
<script src=”js/controllers.js”></script>
<script src=”js/filters.js”></script>
<script src=”js/services.js”></script>
<script src=”lib/angular/angular-resource.js”></script>
</head>
<body ng-app=”phonecat” id=”ng-app”>
<div ng-view></div>
</body>
</html>
此外，官網上提到兩點：
1.如果我們需要使用老派風格的directive語法”ng:”，那么我們需要加入一個xml-namespace到html標簽中以“取悅”IE。（這個是一個歷史原因，我們也不推薦使用ng:）
<html xmlns:ng=”http://angularjs.org”>
對於采用標准寫法的腳本（一切都是以ng-開始而不是ng:開始）就不需要這行內容了。
2.如果你按照angularjs的規則創建了很多自定義標簽，那么每個自定義標簽，對於IE7,8都必須自己寫js 聲明創建了這些標簽。就像這樣：
<!–[if lte IE 8]>
<script>
document.createElement(‘ng-include’);
document.createElement(‘ng-pluralize’);
document.createElement(‘ng-view’);
</script>
<![endif]–>
總而言之，使用了angular.js，就仿佛看到了當初W3C標准化組織對web的遠景規划：用XML替代html一樣。各種操作聲明、自定義標簽將使DOM操作和應用邏輯解耦，它能大大改善代碼的可調性。Angular信奉的是，當組建視圖(UI)同時又要寫軟件邏輯時，聲明式的代碼會比命令式的代碼好得多。
轉載自：http://www.storagelab.org.cn/zhangdi/2013/01/08/angular-js%EF%BC%8Cie789%E5%85%BC%E5%AE%B9%E6%80%A7%E7%9A%84%E5%A4%84%E7%90%86/
原文地址：https://docs.angularjs.org/guide/ie
注：AngularJS1.3已經不支持IE8（包括IE8）以下的瀏覽器。更多信息請查看 我們的Blog 。AngularJS 1.2將繼續支持IE8，但核心團隊不會花時間去解決IE8或更早的IE瀏覽器問題。
本文是介紹針對IE瀏覽器的特征來處理HTML屬性和標簽。如果你想在IE8或者更早的瀏覽器的應用中使用AngularJS的話，這篇文章非常適合你。
該項目目前支持IE9+了，並會修復相應的BUG。持續集成服務器在IE9，IE10，和IE11運行所有的測試請看 Travis CI 和 ci.angularjs.org 。
我們沒有在IE8及以下瀏覽器上測試。用AngularJS功能的子集可以工作在這些瀏覽器，但它是由你來測試和決定是否適用於您的特定的APP。
簡單版本
為了能讓您的AngularJS應用能正常運行在IE上，請確保如下：
1，你需要為IE7及以下瀏覽器添加JSON.stringify方法。可以使用 JSON2 或 JSON3 。
<!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"> ... </html3，不要使用自定義元素標簽，比如<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}}”。后者能運行在chrome和Firefox，但在IE11及以下瀏覽器中無法運行（寫作時的最新版本）。
最重要的部分：
- xmlns:ng-命名空間-你需要為你所有計划要使用的常見標簽創建命名空間。
- document.createElement(yourTagName) -創建自定義的標簽名稱-因為這個問題只在IE老版本瀏覽器中存在，所以你只需要有條件的加載它。對於那些不支持命名空間和自定義HTML標簽的瀏覽器，你需要預處理來讓它在IE中正常的運行。
長版本
IE中不支持非標准標簽的問題，可以分為兩種，每種都有相應的解決辦法
如果標簽名以my:前綴開頭，它會被認為是一個XML命名空間，所以必須在<html xmlns:my=”ignored”>進行相應的命名空間聲明。
如果標簽沒有：，但它不是一個標准的HTML標簽，那么它必須使用document.createElement(‘my-tag’)預先創建。
如果你計划在自定義標簽中使用CSS選擇器，那么無論哪個xml命名空間，你必須使用 document . createElement ( ‘my-tag’ ) 來預創建標簽
好消息
好消息是，這些限制只適用於元素標記名稱，而不是元素的屬性名稱。因此 <div my-tag your:tag ></div> 在IE中是不需要進行特殊處理的。
如果我不這樣做，會發生什么？
如果你的HTML有未知的標簽mytag(可能是my:tag或者my-tag類似的)
<html> <body> <mytag>some text</mytag> </body> </html>它被解析成下面的DOM結構：
#document +- HTML +- BODY +- mytag +-#text: some text我們想要的是BODY元素下有一個子元素mytag，mytag里面包含some text文本。 但在IE中不會解析成上面的樣子（如果沒有進行上面的修復的行為的話）
#document +- HTML +- BODY +- mytag +-#text: some text +-/mytag在IE中，body元素中有三個子元素：
1，自閉標簽。比如自閉標簽<br/>，標簽中/是可選的，但<br>標簽不允許有子元素，所以瀏覽器會認為是三個兄弟元素，而不是把some text作為<br>的子元素。
2，作為some text的文本節點。應該作為mytag的子元素，而不是兄弟元素。
3，損壞的自閉合標簽/mytag。它是不規范的，因為元素名稱不允許有/字符。此外，該自閉合標簽不應該成為DOM的一部分，因為它僅用於繪制DOM的結構。
自定義標簽中的CSS樣式
為了能使CSS選擇器能在自定義元素中工作，無論在XML命名空間，你必須使用 document . createElement ( ‘my-tag’ ) 來預創建自定義標簽名
<html xmlns:ng="needed for ng: namespace"> <head> <!--[if lte IE 8]> <script> // needed to make ng-include parse properly document.createElement('ng-include'); // needed to enable CSS reference 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>