Angular Ausdruck in style-Attribute nicht funktioniert im IE

Ich habe Winkel 1.0.6 (Ich weiß, es ist alt) und ich habe style-Attribut mit Ausdrücken:Angular Ausdruck in style-Attribute nicht funktioniert im IE

<li style="background-color: {{item.color}}"> 
    <span style="color: {{item.color | contrastColor}}">{{item.label}}</span> 
</li>

Es funktioniert gut, aber nicht für das Internet Explorer (The App muss arbeiten für> IE10). Wenn ich das Developer Tool öffne, ist das style Attribut nicht vorhanden. Ich habe versucht, benutzerdefinierte Stil Direktive zu erstellen (weil ich gelernt habe, dass IE ungültige Attribut entfernen, bevor Angular es lesen kann), aber mit diesem einfachen Code habe ich einen Fehler TypeError: Cannot read property 'replace' of undefined von jquery (auf Google Chrome getestet), weil in meinem Fall Artikel .color kann null sein

.directive("logStyle", function() { 
    // logStyle directive 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs) { 
      element.css(scope.$eval(attrs.logStyle)); 
     } 
    }; 
});

Wie kann ich es funktionieren lassen? Ich weiß, dass es ngStyle gibt, aber es ist nicht ganz das, was ich brauche.

Quelle

2014-05-12 jcubic

können Sie eine Plunker oder jsfiddle erstellen, würde ich mag es über Browser hinweg zu sehen. – SoluableNonagon

mit .css() lesen erfordert .css (propertyName), und set erfordert element.css (propertyName, newValue), es scheint, Sie versuchen zu lesen, anstatt zu setzen – SoluableNonagon

@EliteOctagon Sie können auch CSS mit Objekt verwenden. Ich wollte analysieren und erstellen Objekt mit $ eval. Vielleicht sollte ich JSON '{color: item.color}' als Attributwert verwenden. – jcubic

Ok, versuchen Sie dies, aber ich bin nicht sicher, ob ich voll und ganz verstehen, was Ihre

<div ng-controller="appCtrl"> 
<ul> 
    <li ng-repeat="item in items" ng-style="{'background-color': item.color}"> 
     <span ng-style="{ 'color': (item.color | contrastColor) }">{{ item.label }}</span> 
    </li> 
</ul> 
</div>

Edited die HTML zu tun versuchen, könnte dies gestern Abend nicht auf IE testen, damit bis heute warten mussten. IE scheint das style-Attribut mit der {{}} Bindung nicht zu mögen und löscht es aus dem DOM. Ich habe dieses Problem https://github.com/angular/angular.js/issues/2186 gefunden und es gibt einen Plunkr mit der angegebenen Lösung.

Quelle

2014-05-12 15:18:55 johnnty

Funktioniert nicht, habe 'TypeError: Kann die Eigenschaft 'exp' von undefined nicht lesen – jcubic

Addition' color: {{item.color | contrastColor}} 'return parse error bei der Verwendung von ng-style. – jcubic

Versuchen Sie nach Kontrastfarbe zu filtern? – johnnty

Der IE-Browser kann den Winkelausdruck nicht mit dem Attribut style analysieren. Verwenden Sie daher ng-style anstelle von style, um dieses Problem zu beheben.

Quelle

2015-10-20 05:37:22

Für mich geändert style zu ng-attr-style löste das Problem. Getestet in IE und Chrome. Hoffe das hilft jemand anderem.

Sie können {{ }} wie folgt verwenden:

ng-attr-style="color:{{entity.status | statusColor}};"

Quelle

2016-07-11 21:31:28

Stil Wechsel ng-attr-Stil das Problem behebt und funktioniert in allen Browsern

Quelle

2017-03-21 06:43:22

Angular Ausdruck in style-Attribute nicht funktioniert im IE

Antwort

Verwandte Themen