IE8中的AngularJS错误

AngularJS errors in IE8

本文关键字：错误 AngularJS 中的 IE8      更新时间：2023-09-26

我正在使用一个新的angular应用程序，需要使其向后兼容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中加载时，模板似乎也加载了(或也启动了……但我收到了这个错误(

通过使用类似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>

编辑

在IE上修复"对象不支持此方法或属性"可能是一件麻烦的事，因为它不会告诉你任何事情。它并没有告诉你什么是对象，它也没有告诉你属性是什么，它也不会告诉你什么方法最糟糕的是，它没有告诉你这是在哪里发生的。看到图案了吗？实际上，它是在说某个地方发生了不好的事情，去想一下。这就是为什么每个都喜欢IE的原因之一。

添加上面的代码片段可能已经解决了一个问题，但随后又出现了另一个问题。通过发布每一个新的html来修复这个错误消息的面包屑冒险可能需要很长时间，应该与IE的支持人员进行讨论。他们有一个应答机，告诉你升级到他们的其他问题的新垃圾箱。通过Stackoverflow解决这个问题就像在黑暗中，蒙着眼睛，喝醉了酒，用水枪从天空中发射卫星。

你可能会考虑的其他一些事情：

  • 将代码段移动到任何其他脚本include之上
  • 将代码段替换为html5shiv
  • 降级include版本AngularJS。1.1.5版本似乎适用于IE7。1.3版根本不支持IE8
  • 检查Angular IE兼容性的指导方针
  • 开始注释代码(javascript/html(，以便更好地隔离导致问题的部分。请记住，多个问题会在IE中生成相同的错误消息
  • 升级到其他问题的新垃圾箱

我想花点时间回答这个问题，以防其他人也发生了同样的事情。我尝试过polyFill，但没有成功，所以我尝试在IE9中运行代码，同时在IE8模式下运行，希望得到不同的错误。。。。沃伊拉。。。。

null一针见血。。。它在JS中，因为我在做document.addListener((。幸运的是，我能够巧妙地决定，它支持的功能不够重要，无法让我拔头发，所以我删除了JS中的那行。。。

其他一切都奏效了。。。。希望这能对未来的某个人有所帮助，因为IE提供了一流的错误消息

相关文章：