IE8中的AngularJS错误

时间:2014-04-30 23:10:53

标签: javascript angularjs internet-explorer-8

我正在使用一个新的角度应用程序,需要使其向后兼容IE8。从它看起来像它加载我的路由信息​​,加载模板(到一个点)但在concole日志中我看到以下错误。

  

TypeError:对象不支持此属性或方法<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中加载时,模板似乎加载(或启动...但我得到此错误)

2 个答案:

答案 0 :(得分:6)

使用类似html5shiv或此小片段的内容添加对IE8的html5支持:

<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>

修改

修复&#34;对象不支持此方法或属性&#34;在IE上可以是野兽,因为它不会告诉你任何事情。它没有告诉你什么是对象,它没有告诉你什么是属性,它没有告诉你方法< / strong>最糟糕的是它没有告诉你哪里这实际发生了。看模式?实际上是它的说法; 在某个地方发生了一些不好的事情,去了数字。这是每个人喜欢 IE的原因之一。

添加上面的代码片段可能解决了一个问题,但随后出现了另一个问题,产生了同样出色的错误消息。通过发布每个新的 html 来修复错误消息的面包屑冒险可能需要很长时间,而应该与IE的帮助台进行讨论。 他们有一台电话答录机,告诉你升级到新的其他问题。通过Stackoverflow解决这个问题就像是用水枪在天空中射击卫星,在黑暗中,蒙上眼睛,喝醉了。

您可能会考虑其他一些事项:

  • 将代码段移至上面的任何其他脚本
  • 用html5shiv
  • 替换代码段
  • 降级包含版本AngularJS。版本1.1.5似乎适用于IE7。版本1.3根本不支持IE8。
  • 查看Angular IE compatibility
  • 的指南
  • 开始评论代码(javascript / html)以更好地隔离导致问题的部分。请注意,多个问题会在IE中生成相同的错误消息。
  • 升级到新的其他问题。

答案 1 :(得分:5)

我想花点时间回答这个问题,其他人也有同样类型的事情发生。我尝试polyFill,但没有工作,所以我尝试在IE9模式下运行时运行IE9中的代码,希望得到一个不同的错误.... Voila ....

null击中头部的钉子......它在JS中,这是因为我在做document.addListener()。幸运的是,我能够巧妙地决定这个支持的功能不够重要,不能把我的头发拉出来,所以我在我的js中删除了那行......

其他所有工作......希望这可以为将来的某些人提供一些帮助,因为IE提供了出色的错误信息