2014-04-30 49 views
3

我正在使用新的角度應用程序,並且需要使其向後兼容IE8。從它看起來像加載在我的路由信息​​,加載模板(到一個點),但在concole日誌中我看到以下錯誤。IE8中的AngularJS錯誤

TypeError: Object doesn't support this property or method <div class=ng-scope ng-view>

這是我的索引HTML頁面的樣子:

<!DOCTYPE html> 
<html id="ng-app" ng-app="app"> 
    <head> 
     <!--Add dependencies--> 
     <script src="jquery.min.js"></script> 
     <link rel="stylesheet" src="bootstrap.min.css" /> 
     <script src="angular.min.js"></script> 
     <script src="angular-route.js"></script> 
     <script src="ui-bootstrap.js"></script> 
     <script type="text/javascript"> 
      document.createElement('header'); 
      document.createElement('nav'); 
      document.createElement('menu'); 
      document.createElement('section'); 
      document.createElement('article'); 
      document.createElement('aside'); 
      document.createElement('footer'); 
     </script> 
    </head> 
    <body> 
     <div id="wrapper"> 
      <header class="header header-fixed"> 
       <section class="navbar navbar-inverse docs-navbar-primary"> 
        <div class="container"> 
         <div class="row"> 
          <div class="col-md-7" style="color:white; margin-top:14px;">Thinflash: Fullscreen Demo</div> 
         </div> 
        </div> 
       </section> 
      </header> 
      <section role="main" class="container main-body"> 
       <div ng-view></div> 
      </section> 
      <!--Add AngularJs Files--> 
      <script src="swfObject.js"></script> 
      <script src="app.js"></script> 
      <script src="appControllers.js"></script> 
      <script src="thinflash.js"></script> 
     </div> 
    </body> 
</html> 

Template.html:

<div ng-controller="thinflash.controllers.playback"> 
    <div ng-controller="app.controllers.fullscreen"> 
     <div class="mainWrapper" id="stageWrapper"> 
      <label>SWF Object Display </label> 
      <div class="swfWrapper" style="width:320px; height:240px;" id="swfStage"> 
       <div class="tf-container" tf-swf tf-interface="flashInterface" tf-src="thin.swf" tf-min-version="11.0.0"></div> 
      </div> 
     </div> 

     <div class="col-md-5"> 
      <form role="form"> 
       <!-- Video Playback Controls --> 
       <div class="row"> 
        <div class="form-group col-md-7"> 
         <label>Select Preloaded Video:</label> 
         <select class="form-control" ng-model="myVideo" ng-init="myVideo = videos[2]" ng-change="changeVideo(myVideo)" ng-options="v for v in videos"><option></option></select> 
        </div> 
       </div> 

       <div class="row"> 
        <div class="form-group col-md-7"> 
         <button type="button" class="btn btn-primary" ng-click="pausePlaybackToggle()">Pause</button> 
         <button type="button" class="btn btn-primary" ng-click="playVideo()">Play</button> 
        </div> 
       </div> 

       <div class="row"> 
        <div class="form-group col-md-7"> 
         <label>Volume Control:</label> 
         <input style="width:50%;" type="range" id="slider" min="1" max="100" step="1" ng-model="volume" ng-change="changeVolume()"> 
        </div> 
       </div> 

       <div class="row"> 
        <div class="form-group col-md-8"> 
         <label>Size Controls:</label><br/> 
         <button type="button" class="btn btn-primary" ng-click="changeVideoSize(1)">Small</button> 
         <button type="button" class="btn btn-primary" ng-click="changeVideoSize(2)">Medium</button> 
         <button type="button" class="btn btn-primary" ng-click="changeVideoSize(3)">Large</button> 
        </div> 
       </div> 
      </form> 
     </div> 
    </div> 
</div> 

時再加載應用程序在IE8似乎模板負載(或開始太...但我得到這個錯誤)

+0

您發佈了HTML,但這是一個js錯誤。你可以發表嗎?通常是因爲您使用的是不受支持的數組函數,如indexOf等。 – Jorg

回答

6

使用類似添加html5支持IE或這個小片段:

<script type="text/javascript"> 
    document.createElement('header'); 
    document.createElement('nav'); 
    document.createElement('menu'); 
    document.createElement('section'); 
    document.createElement('article'); 
    document.createElement('aside'); 
    document.createElement('footer'); 
</script> 

編輯

修復的「對象不支持此方法或屬性」 IE可以是一個野獸,因爲它是不會告訴你任何東西。它不會告訴你什麼對象,它不會告訴你什麼財產,它不會告訴你什麼方法最糟糕的是它不會告訴你哪裏這實際上發生。看到模式?有效地說, 某處發生了不好的事情,去圖。這就是爲什麼大家都喜歡 IE的原因之一。

添加上面的代碼片段可能已經解決了一個問題,但隨後出現了另一個問題,它產生了同樣的輝煌錯誤消息。通過發佈每個新涉及的片段來修復這個麪包屑冒險的錯誤消息可能需要很長時間,而應該與IE的幫助臺討論。 他們有一個應答機,告訴你升級到他們新的蹩腳盒子的其他問題。通過Stackoverflow解決這個問題就像用水槍在天空中拍攝衛星,在黑暗中,矇住眼睛並喝醉。

一些其他的東西,你可能會考慮:

  • 移動片段以上任何其他腳本包括
  • 與html5shiv更換片斷
  • 降級包括版本AngularJS。版本1.1.5似乎適用於IE7。版本1.3完全不支持IE8。
  • 查看指南Angular IE compatibility
  • 開始評論代碼(javascript/html)以更好地隔離導致問題的部分。請記住,多個問題會在IE中產生相同的錯誤消息。
  • 升級到他們新的蹩腳盒子的其他問題。
+0

我將上面的腳本添加到索引頁的Head部分。 ui-bootstrap的東西現在似乎正在工作,但我仍然得到了我最初列出的同樣的錯誤。加載時可能在模板中存在問題。我會將其添加到原來的帖子中進行澄清。 – Deslyxia

5

我想花一秒鐘的時間回答這個問題,因爲別人有同樣類型的事情發生。我試圖polyFill,並沒有工作,所以我試圖運行在IE9中的代碼,而在IE8模式下運行,希望能得到不同的錯誤....瞧... ...

null擊中頭部釘...它在JS中,這是因爲我在做document.addListener()。幸運的是,我能夠很快地決定,這種支持的功能不足以拉我的頭髮,所以我刪除了在我的js線...

一切工作....希望這可以是一些幫助未來的人,因爲IE提供了恆星錯誤信息