2013-08-24 22 views
7

Internet Explorer 8でAngularJsテンプレートをレンダリングできません。Internet ExplorerでAngularJを使用するためのいくつかの提案に従っていますが、まだ動作させることができません。以下は、使用したスクリプトを含むページのHTMLコードです。 Internet Explorerでコードが動作しないようにする何かを使用しているかどうかを指摘することは可能ですか?誰かが詳細を知りたい場合は、他のファイルの詳細をアップロードできます。すべてのブラウザは他のすべてのブラウザで動作しますが、Internet Explorerのみで動作します。AngularJsテンプレートがInternet Explorer 8にロードされていません。

<!doctype html> 
<!--[if lt IE 7]>  <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> 
<!--[if IE 7]>   <html class="no-js lt-ie9 lt-ie8"> <![endif]--> 
<!--[if IE 8]>   <html class="no-js lt-ie9"> <![endif]--> 
<!--[if gt IE 8]><!--> <html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="tripApp" class="no-js"> <!--<![endif]--> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <title></title> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> 

     <!-- build:css({.tmp,app}) styles/main.css --> 
     <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"> 
     <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"> 
     <link rel="stylesheet" href="styles/main.css"> 
     <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700' rel='stylesheet' type='text/css'> 
     <style> 
      @-moz-document url-prefix() { 
        .filter-menu .btn { 
         padding: 0; 
        } 
       } 
     </style> 
     <!-- endbuild --> 
     <script src="bower_components/modernizr/modernizr.js"></script> 

     <!--[if lte IE 8]> <script src="scripts/angular-ui-ieshiv.js"></script><![endif]--> 

     <!--[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]--> 

     <!--[if lt IE 7]> 
      <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js"></script> 
     <![endif]--> 
     <!--[if lt IE 8]> 
      <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script> 
     <![endif]--> 
     <!--[if lt IE 9]> 
      <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> 
     <![endif]--> 
     <!-- <script src="bower_components/less/dist/less-1.4.2.min.js"></script> --> 
</head> 
<body> 
    <!--[if lt IE 8]> 
     <p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p> 
    <![endif]--> 

    <!--[if lt IE 9]> 
     <script src="bower_components/es5-shim/es5-shim.js"></script> 
     <script src="bower_components/json3/lib/json3.min.js"></script> 
    <![endif]--> 

    <!-- Add your site or application content here --> 
    <aside id="sidebar"> 
     <ul class="list-unstyled"> 
      <li><a href="#/hotels" prevent><span class="icon-briefcase icon-2x"></span></a></li> 
      <li><a href="#/restaurants" prevent><span class="icon-food icon-2x"></span></a></li> 
      <li><a href="#/cafe" prevent><span class="icon-coffee icon-2x"></span></a></li> 
     </ul> 
    </aside> 
    <section id="topbar"> 
     <ul class="list-unstyled"> 
      <li><span class="icon-briefcase icon-2x"></span></li> 
     </ul> 
    </section> 

    <section id="main-container"> 
     <section ui-view id="main-inner-container"></section> 
    </section> 

    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. --> 
    <script> 
     var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']]; 
     (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0]; 
     g.src='//www.google-analytics.com/ga.js'; 
     s.parentNode.insertBefore(g,s)}(document,'script')); 
    </script> 

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script src="bower_components/jquery-easing/jquery.easing.min.js"></script> 

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script> 
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.5.0.js"></script> 
    <script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script> 
    <script src="http://code.angularjs.org/1.0.3/angular-resource.min.js"></script> 
    <script src="bower_components/angular-animate/angular-animate.min.js"></script> 
    <script src="bower_components/angular-promise-tracker/promise-tracker.min.js"></script> 
    <script src="scripts/app.js"></script> 
    <script src="scripts/services.js"></script> 
    <script src="scripts/directives.js"></script> 
    <script src="scripts/controllers/hotelsController.js"></script> 
    <script src="scripts/controllers/restaurantsController.js"></script> 

    <script src="bower_components/masonry/masonry.js"></script> 

    <!-- build:js({.tmp,app}) scripts/scripts.js --> 
    <!-- endbuild --> 
    </body> 
</html> 
+0

アプリを初期化するこのテンプレートでは、 @BKMのように – BKM

+0

には、IE8以下のアプリケーション名のディレクティブはありません。 – akonsu

答えて

8

私は、Internet Explorer 8のサポートが必要な瞬間、AngularJSプロジェクトに取り組んでいます。あなたはIE8はあなたのための私の最初のアドバイスは(属性バージョンの代わりに<div mynewtag>を使用)など<mynewtag>などのカスタム要素タグを使用しないことですサポート与える必要がある場合はIE 8

含む - すべてが細かいクロスブラウザを進めています。 AngularJSはIE 8で動作するためにあなたが私のindex.htmlブートストラップを見ることができます <!--[if lte IE 8]><script> document.createElement('mynewtag');</script><![endif]-->

それはあなたにこの1のようにその場で要素を作成するの頭痛の種を保存します

<!DOCTYPE html> 
<!--[if IE 8]> 
<html class="no-js lt-ie9" xmlns:ng="http://angularjs.org" id="ng-app" ng-app="myApp"> 
<![endif]--> 
<!--[if gt IE 8]><!--> 
<html class="no-js" ng-app="myApp"> 
<!--<![endif]--> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <title ng-bind="header"></title> 
    <meta name="description" content=""> 

    <!-- build:css({.tmp,app}) system/css/main.css --> 
    <link rel="stylesheet" href="system/css/main.css"> 
    <!-- endbuild --> 

    <!--[if IE 8]> 
     <script src="ui/components/es5-shim/es5-shim.js"></script> 
    <script src="ui/components/json3/lib/json3.min.js"></script> 
    <![endif]--> 
    </head> 
<body ng-controller="myAppCtrl"> 


<!-- Add site or application content here --> 
<div class="content" ng-view=""></div> 

<!-- build:js system/js/plugins.js --> 
<script src="ui/components/angular/angular.js"></script> 
<!-- endbuild --> 

<!-- build:js({.tmp,app}) system/js/scripts.js --> 
<script src="system/js/app.js"></script> 
<script src="system/js/filters/filters.js"></script> 
<script src="system/js/controllers/controllers.js"></script> 
<script src="system/js/services/services.js"></script> 
<script src="system/js/directives/directives.js"></script> 
<script src="system/js/scripts.js"></script> 
<!-- endbuild --> 
<!-- build:js system/js/modules.js --> 
<script src="ui/components/angular-resource/angular-resource.js"></script> 
<script src="ui/components/angular-cookies/angular-cookies.js"></script> 
<script src="ui/components/angular-sanitize/angular-sanitize.js"></script> 
<!-- endbuild --> 
</body> 
</html> 

希望があれば助かります。

+0

申し訳ありませんが、 'es5-shim.js'と' json3.min.js'はどこから来たのですか?それらは 'jQuery UI'に含まれているのか、別にダウンロードしていますか? – Blaise

+0

bowerを使用してダウンロードするか、リモートURLとして使用できます – Ventura

関連する問題