【问题标题】：AngularJS errors in IE8IE8 中的 AngularJS 错误
【发布时间】：2014-04-30 23:10:53
【问题描述】：

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

TypeError: Object 不支持该属性或方法<div class=ng-scope ng-view>

这是我的 index 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>

模板.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 中加载时，它似乎加载了模板（或也启动了......但我得到了这个错误）

【问题讨论】：

您发布了 HTML，但这是一个 js 错误。你可以把它贴出来吗？通常是因为您使用了不受支持的数组函数，例如 indexOf 等。

标签： javascript angularjs internet-explorer-8

【解决方案1】：

使用html5shiv 或这个小sn-p 之类的东西添加对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 的原因之一。

添加上面的 sn-p 可能已经解决了一个问题，但随后又出现了另一个问题，它产生了同样出色的错误消息。通过发布每个新涉及的 html 片段来修复这种错误消息的面包屑冒险可能需要很长时间，并且应该与 IE 的帮助台讨论。 他们有一个答录机告诉你升级到他们新的其他问题的糟糕盒子。通过 Stackoverflow 解决这个问题就像在黑暗中，蒙着眼睛喝醉了，用水枪从天上射出卫星。

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

将 sn-p 移至任何其他脚本的上方，包括
用 html5shiv 替换 sn-p
降级包含版本 AngularJS。 1.1.5 版似乎适用于 IE7。 1.3 版根本不支持 IE8。
查看Angular IE compatibility的指导方针
开始注释代码 (javascript/html) 以更好地隔离导致问题的部分。请记住，多个问题会在 IE 中生成相同的错误消息。
升级到其他问题的新垃圾箱。

【讨论】：

我将上面的脚本添加到了我的索引页面的头部部分。 ui-bootstrap 的东西现在似乎可以工作了，但我仍然遇到我最初列出的相同错误。我的模板加载时可能存在问题。我会将其添加到原始帖子中以进行澄清。

【解决方案2】：

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

null 一针见血……它在 JS 中，这是因为我正在执行 document.addListener()。幸运的是，我能够快速确定它所支持的功能还不够重要，无法将我的头发拉出来，所以我在我的 js 中删除了那条线......

其他一切正常......希望这对将来的某人有所帮助，因为 IE 提供了出色的错误消息

【讨论】：