Angular JS funktioniert in Chrome, aber nicht mit IE 11

Ich bin Kommissionierung bis Angular JS an:
http://www.sitepoint.com/practical-guide-angularjs-directives/,
und ich finde, dass die folgenden codes funktionieren in Chrome, aber 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 die mouseover und click-events funktionieren. Allerdings ist der Absatz die Hintergrundfarbe nicht im IE (die Farbe ändert sich nie). Es ist ok, in Chrom. Danke!

  • Versuchen Sie ngStyle anstelle der klassischen style Attribut.
  • Ich habe versucht, '<p ng-style="{background-color:Farbe}">Hello World!!</p>', und es funktioniert nicht in IE und Chrome. Ich bin keine Zitate...! Sowohl einfache und doppelte Anführungszeichen schon verwendet werden. 🙁
  • Escape-Anführungszeichen
  • Ich habe versucht, '<p ng-style="{&#39;background-color&#39;:color}">Hello World!!</p>' und es funktionierte in beiden Browsern. Danke!
  • Als Nebeneffekt beachten, '<p ng-style=&#34;{&#39;background-color&#39;:color}&#34;>Hallo Welt!</p>' nicht funktioniert in beiden Browsern. Nicht entkommen zu viel, nicht entgehen zu wenig. Was für Kopfschmerzen!
  • versuchen Sie, verschieben Sie Ihr Skript in die head - tag des html, das entfernen der Skripte aus den html - body ich war mit diesem problem im IE11 und FF und es ist mein problem gelöst. Wenn Sie weiterhin dieses problem haben, versuchen Sie dies, und lassen Sie es uns wissen.
  • Es gibt mehrere andere Lösungen in diesem stackoverflow-Frage.

InformationsquelleAutor Dunnomuch | 2014-05-19
  1. 8

    Werden konnte, weil der Dokumentkompatibilität. Dieser arbeitete für mich:

    Fügen Sie dieses tag, um 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>
    • Dieser arbeitete für mich! Ich habe nur versucht, um zu bestätigen, Eckig funktionieren würde, da meine Firma hat Ihren IE gesperrt ziemlich gut. So, ich hatte gerade eine sehr einfache einzeilige Eckige Ausdruck ohne Controller oder etwas ähnliches. Hat nicht funktioniert im IE 11 aber würde in Chrom. Einzige Unterschied den ich geändert habe war, dass ich "IE-11" statt "IE-10".
    • Wenn Sie an einer website arbeiten und kann nicht nehmen Sie es offline zu machen, aber haben ein .master (wenn ein asp.net website) Datei dann auf hinzufügen <meta http-equiv="X-UA-Compatible" content="IE=11" /> der master ' s <head> kann sein eine gute Lösung zu. Dank @James Gates R unten für Ihren Vorschlag.
    InformationsquelleAutor Mark
  2. 3

    Verwendung ng-style-tags statt style="{{CSS}}". Letzteres funktioniert in Chrome und Firefox aber nicht in Internet Explorer <= 11.

    InformationsquelleAutor Ankit
  3. 3

    Ich habe Folgendes in den Kopf und es funktionierte. seine sehr ähnlich zu dem, was Mark sagte...nur keiner asp.net bestimmten:

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

    ich auch gefunden, die ich brauchte, um hinzuzufügen, zu reagieren und modernizer in einer if-Anweisung, die für ältere IE-Versionen:

    <!--[if lt IE 9]>
<script src="/Binders/Scripts/modernizr-2.8.3.js"></script>
<script src="/Binders/Scripts/respond.js"></script>
<![endif]-->
    • Das war ein Lebensretter. Obwohl mein angularjs app hatte glücklich die Arbeit mit dem IE bis jetzt, und obwohl ich mich gar nicht ändern angular.min.js die Datei (es war v 1.4.4), das problem tauchte über Nacht nach einem release an einen Kunden. Ich konnte nicht nehmen Sie die client-offline während der Geschäftszeiten, aber könnte diese änderung auf die website-master-Seite, um es zu beheben, ohne dass alle anderen die Sitzung.
    InformationsquelleAutor James Gates R.
  4. 0

    Versuchen "use strict" - Richtlinie vor dem controller

    "use strict";
function controller($scope) {
    //your code....
}
    InformationsquelleAutor Shyam_coder
Schreibe einen Kommentar