Angular JS 适用于 Chrome，但不适用于 IE 11答案

【问题标题】：Angular JS works in Chrome, but not IE 11Angular JS 适用于 Chrome，但不适用于 IE 11
【发布时间】：2014-07-07 02:09:09
【问题描述】：

我在以下位置选择 Angular JS： http://www.sitepoint.com/practical-guide-angularjs-directives/, 我发现以下代码在 Chrome 中有效，但在 IE 11 中无效。

<!DOCTYPE html>
<html ng-app="myapp">
<head>
    <meta charset="utf-8" />
    <title>No Title</title>
    <script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.7/angular.js" data-semver="1.2.7"></script>
</head>
<body>
    <input type="text" ng-model="color" placeholder="Enter a color..." />
    <div data-hello-world />
    <script>
        var app = angular.module('myapp', []);
        app.directive('helloWorld', function () {
            return {
                restrict: 'AE',
                replace: true,
                template: '<p style="background-color:{{color}}">Hello World!!</p>',
                link: function (scope, elem, attrs) {
                    elem.bind('click', function () {
                        elem.css('background-color', 'white');
                        scope.$apply(function () { scope.color = "white"; });
                    });
                    elem.bind('mouseover', function () { elem.css('cursor', 'pointer'); });
                }
            }
        });
    </script>
</body>
</html>

具体来说，鼠标悬停和单击事件可以正常工作。但是，段落的背景颜色在 IE 中没有（颜色永远不会改变）。在 Chrome 中没问题。谢谢！

【问题讨论】：

尝试使用ngStyle 而不是经典的style 属性。
我试过 '
Hello World!!
'，但它在 IE 和 Chrome 中都不起作用.我的报价快用完了...！单引号和双引号都已使用。 :(
转义引号
我尝试了 '
Hello World!!
'，它在两种浏览器中都有效。谢谢！
这个stackoverflow question还有其他几个解决方案。

标签： javascript angularjs internet-explorer google-chrome background-color

【解决方案1】：

可能是因为文档兼容性。这对我有用：

将此标签添加到 web.config。

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <clear />
        <add name="X-UA-Compatible" value="IE=10" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>
</configuration>

【讨论】：

这对我有用！我只是想确认 Angular 是否可以工作，因为我的公司已经很好地锁定了他们的 IE。所以，我只有一个非常简单的单行 Angular 表达式，没有控制器或类似的东西。在 IE 11 中不起作用，但在 Chrome 中会起作用。我改变的唯一区别是我使用“IE-11”而不是“IE-10”。
如果你在一个网站上工作并且不能让它离线来做这个改变，但是有一个 .master（如果是一个 asp.net 网站）文件然后添加到 master 的也是一个很好的解决方案。感谢下面的@James Gates R 的建议。

【解决方案2】：

使用 ng-style 标签而不是 style="{{CSS}}"。后者适用于 Chrome 和 Firefox，但不适用于 Internet Explorer

【讨论】：

【解决方案3】：

在控制器之前尝试“使用严格”指令

"use strict";
function controller($scope) {
    // your code....
}

【讨论】：

【解决方案4】：

我将以下内容添加到头部并且它起作用了。它与马克所说的非常相似......只是没有特定于 asp.net：

<meta http-equiv="X-UA-Compatible" content="IE=11" />

我还发现我需要在旧版本 IE 的 if 语句中添加响应和现代化：

<!--[if lt IE 9]>
<script src="/Binders/Scripts/modernizr-2.8.3.js"></script>
<script src="/Binders/Scripts/respond.js"></script>
<![endif]-->

【讨论】：

这是救命稻草。尽管到目前为止我的 angularjs 应用程序一直在愉快地使用 IE，并且即使我没有更改 angular.min.js 文件（它是 v 1.4.4），但这个问题在发布给客户端后一夜之间就出现了.我无法在工作时间让客户离线，但可以在网站的母版页上进行此更改以修复它，而无需取消其他所有会话。