it-swarm.com.de

Angular JS funktioniert in Chrome, aber nicht IE 11

Ich nehme Angular JS an: http://www.sitepoint.com/practical-guide-angularjs-directives/ , Und ich Stellen Sie fest, dass die folgenden Codes in Chrome funktionieren, jedoch nicht 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>

Insbesondere funktionieren die Mouseover- und Klickereignisse einwandfrei. Die Hintergrundfarbe des Absatzes ist jedoch nicht in IE (die Farbe ändert sich nie). In Chrome ist es in Ordnung. Vielen Dank!

11
Dunnomuch

Möglicherweise liegt eine Dokumentkompatibilität vor. Das hat für mich funktioniert:

Fügen Sie dieses Tag zu web.config hinzu.

<?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> 
7
Mark

Ich fügte dem Kopf folgendes hinzu und es funktionierte. Es ist sehr ähnlich zu dem, was Mark sagte ... nur keine asp.net-spezifisch:

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

ich fand auch, dass ich Respect und Modernizer in einer if-Anweisung für ältere IE-Versionen hinzufügen musste:

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

Verwenden Sie ng-style-Tags anstelle von style = "{{CSS}}". Letzteres funktioniert in Chrome und Firefox, aber nicht in Internet Explorer <= 11.

3
Ankit

Versuchen Sie die Anweisung "use strict" vor dem Controller

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