18

必要なブラウザーで AngularJS が動作するかどうかを確認するために、Firefox、Chrome、IE8+ で正常に動作する単純なデータビンギングのデモを作成しましたが、IE7 でも動作させる必要があります。残念ながら、私はそれを機能させることができません。ng-属性を無視して、中括弧が付いた html のみを表示します。

Internet Explorer でAngularJSに関するいくつかの 投稿 を確認し、それぞれで提案された修正を試みましたが、私のデモでは何も機能しません。

これは私のデモの 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 JavaScript です。

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"}
    ];
}

私は何か間違ったことをしていますか？私が見逃した他のヒントはありますか？

編集: AngularJS v1.0.5を使用しています

4

2 に答える 2

19

もう少し読んだ後、私はそれを機能させることができました。

IE7 の問題はブートストラップでした。発砲していませんでした！このページに示すように手動で初期化を行ったところ、うまくいきました。

これは、HTML に追加したコードで、Internet Explorer 8 以下でのみ起動することを保証します (すべてのブラウザーで起動すると、一部のイベント ハンドラーが IE 以外のブラウザーで 2 回起動するため)。

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

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

于 2013-04-10T15:28:22.030 に答える