web-dev-qa-db-ja.com

Angular JSはChromeでは機能しますが、IE 11では機能しません

私はAngular JS at： 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="[email protected]" 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では問題ありません。ありがとうございます。

javascriptangularjsinternet-explorergoogle-chromebackground-color
13
Dunnomuch

ドキュメントの互換性が原因である可能性があります。これは私のために働きました：

このタグを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>
8
Mark

頭に以下を追加し、うまくいきました。マークが言ったことに非常に似ています... 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]-->
4
James Gates R.

Style = "{{CSS}}"の代わりにng-styleタグを使用します。後者はChromeおよびFirefoxで機能しますが、Internet Explorer <= 11では機能しません。

3
Ankit

コントローラの前に「厳密な使用」ディレクティブを試してください

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