2013-04-10 14 views
18

AngularJSが必要なブラウザで動作するかどうかを確認するには、Firefox、Chrome、IE8 +でうまく動作する簡単なデータビティングデモを作ったが、IE7でも動作させる必要がある。不幸にも、私はそれで動作させることはできません。 ng-の属性を無視して、中括弧を含むhtmlのみを表示します。Internet Explorer 7でAngularJS Appを実行する

私は、Internet Explorer上でseveralpostsaboutAngularJSを確認し、それぞれの提案の修正を試みたが、何も私のデモで動作していません。

これは私のデモのHTMLです:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>Angular IE7 Test</title> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<!--[if lt IE 9]> 
<script type="text/javascript" src="angularjs/html5shiv.js"></script> 
<![endif]--> 
<!--[if lt IE 8]> 
<script type="text/javascript" src="angularjs/json3.js"></script> 
<![endif]--> 
<script language="JavaScript" src="angularjs/angular.min.js"></script> 
<script language="JavaScript" src="angularjs/test.js"></script> 
</head> 
<body class="ng-app"> 
    <div ng-controller="serversCtrl"> 
     <p>{{texto}}</p> 

     <table border="1"> 
      <tbody> 
       <tr><th>Col1</th><th>Col2</th><th>Col3</th></tr> 
       <tr ng-repeat="item in items"><td>{{item.col1}}</td><td>{{item.col2}}</td><td>{{item.col3}}</td></tr> 
      </tbody> 
     </table> 
    </div> 
</body> 
</html> 

そして、これは、コントローラとモデルを含むジャバスクリプトtest.jsされています。私は間違って何かを

function serversCtrl($scope, $http, $location) { 
    $scope.texto = "Texto dinamico"; 
    $scope.items = [ 
     {col1: "foo1", col2: "bar1", col3: "baz1"}, 
     {col1: "foo2", col2: "bar2", col3: "baz2"}, 
     {col1: "foo3", col2: "bar3", col3: "baz3"}, 
     {col1: "foo4", col2: "bar4", col3: "baz4"}, 
     {col1: "foo5", col2: "bar5", col3: "baz5"} 
    ]; 
} 

をやっていますか?それを私が逃したようにする他のヒントはありますか?

EDIT:私はあなたの体のタグにid="ng-app"を追加AngularJS v1.0.5デベロッパー

+1

はい、あなたは何か間違っています! IE7のサポートは誰にも良いことではありません。 – themihai

答えて

19

だユーザー/クライアントに通知します。

IE7の問題は、ブートストラップです。それは何も発射していなかった!そこで私はthis pageのように手動で初期化を行いました。

これは、(私はすべてのブラウザのためにそれを発射する場合、いくつかのイベントハンドラは、IE以外のブラウザで二回発射するので)、私はそれは、Internet Explorer 8以下でのみ発動する保証HTMLに追加されたコードです:

<!--[if lte IE 8]> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     angular.bootstrap(document); 
    }); 
</script> 
<![endif]--> 

$document.ready()の部分は、ボディのすべてがロードされたときにこのコードが実行されることを確実にするjQueryの方法ですが、自分のサイトでjQueryを使用していたので、私はそれを利用しました。

+3

JSFiddleまたはPlnkrの例を教えてください。私は彼の仕事を得ることができず、私は実際の実例を本当に感謝します。 –

62

1)を使用しています。

<body ng-app="myApp" id="ng-app"> 

  2)は、それが私はそれを動作させることができ、いくつかのより多く読んだ後、2013年

+0

実際には、class = "ng-app"の代わりにid = "ng-app"を試してみましたが、どれも問題を解決しませんでした。私の国(エルサルバドル)では、人々はまだWindows XPとInternet Explorer 6と7を不幸にしていますが、私たちはアップグレードを納得させるプロセスにあります。ご回答有難うございます。 –

+0

'id =" ng-app "'は別のものとして意図されていません。どちらも必要です、 'ng-app =" myApp "と' id = "ng-app" ' – Stewie

+51

+1のステップ2 ... – Stirling

関連する問題