IE 7 对象中的 Angularjs 错误不支持属性或方法“querySelector”答案

【问题标题】：Angularjs error in IE 7 Object doesn't support property or method 'querySelector'IE 7 对象中的 Angularjs 错误不支持属性或方法“querySelector”
【发布时间】：2014-11-06 19:46:30
【问题描述】：

我在现有的 asp.net 项目中引入了 angularjs，项目中有许多语句只能在 IE 7 兼容模式下工作，但是当我运行项目时，我从 angularjs 文件中收到以下错误

Object doesn't support property or method 'querySelector'

在对这个问题进行了一些研发之后，我发现 querySelector 是仅从 IE 8 引入的。

现在如何使用 angularjs 让我的应用程序在 IE 7 中运行？

我不想将元标记设置为超过 ie 7，因为我现有的应用程序依赖于 ie 7，这在 ie 8 及更高版本中不起作用。

我尝试如下配置禁用 SCE 的 Angular 模块：

var rtApp = angular.module("realTimeNotifications", []).config(function($sceProvider) {
    // Completely disable SCE to support IE7.
    $sceProvider.enabled(false);
});

但还是没有运气。

提前致谢。

【问题讨论】：

在Running AngularJS App on Internet Explorer 7 中查看接受的答案——它提到了引导，但一般来说，正如您已经说过的，因为不支持querySelector，您还可以缩减AngularJs 的版本与IE7兼容的“更多”。 -- 另外见Dealing with IE family，特别是关于支持IE 7的部分。
我已经尝试过引导，但没有运气，因为问题出在 querySelector 对象上
我在评论中链接了另一篇专门针对 IE 的文章，它在底部有一整节，提到了 shivs、polly-fills 等。希望这会有所帮助。
你可以使用jQuery来添加document.querySelector/All(selector)使用$(document).find(selector)，但是IE7不支持HTMLElement.prototype，所以不能添加到其他元素中。为什么还需要支持 IE7？

标签： javascript html asp.net angularjs internet-explorer-7

【解决方案1】：

我也一直在努力解决 IE7 和 IE6 的兼容性问题，并发现使用 angularjs 版本 1.1.5 而不是 1.2.25 可以防止您描述的错误。

除了这个简单的例子之外，Angular 在 IE6 和 IE7 中是否可用是另一回事。

以下代码已在 IE6、7、8、9、11 的兼容模式设置为 ON 的域上进行了测试。

我假设该示例的许多部分都可以省略。我刚开始使用角度，所以不能保证使用最佳实践。它至少应该提供一个起点。

<!DOCTYPE html>
<html class="ng-app:phonecatApp" ng-app="phonecatApp" id="ng-app" xmlns:ng="http://angularjs.org" lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE; IE=9; IE=8; IE=7" />
    <meta charset="utf-8">
    <title>My HTML File</title>
    <link rel="stylesheet" href="../stylesheets/html5.css">
    <!--[if lte IE 7]>
        <script src="../Includes/Client/JS/json2.js"></script>
    <![endif]-->

    <!--[if lte IE 9]>
        <script type="text/javascript" src="es5-shim-4.0.3-min.js"></script>
    <![endif]-->
    <script type="text/javascript" src="html5shiv.min.js"></script>
    <script type="text/javascript" src="angular-1.1.x.js"></script>

    <script type="text/javascript">
        var phonecatApp = angular.module('phonecatApp', []);

        phonecatApp.controller('PhoneListCtrl', function ($scope) {
          $scope.phones = [
            {'name': 'Nexus S',
             'snippet': 'Fast just got faster with Nexus S.'},
            {'name': 'Motorola XOOM™ with Wi-Fi',
             'snippet': 'The Next, Next Generation tablet.'},
            {'name': 'MOTOROLA XOOM™',
             'snippet': 'The Next, Next Generation tablet.'}
          ];
        });
    </script>
</head>
<body ng-controller="PhoneListCtrl">

    <ul>
        <li ng-repeat="phone in phones">
            {{phone.name}}
            <p>{{phone.snippet}}</p>
        </li>
    </ul>

</body>

【讨论】：