espressione angolare all'interno attributo di stile non funzionano in IE

ho 1.0.6 angolare (so che è vecchio) e ho attributo style con le espressioni:espressione angolare all'interno attributo di stile non funzionano in IE

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

Funziona bene, ma non per IE (The l'app deve funzionare per> IE10). Quando apro lo strumento Developer, l'attributo style non è presente. Ho provato a creare direttive di stile personalizzate (perché pensavo che IE rimuova l'attributo non valido prima che Angular possa leggerlo) ma con questo semplice codice, ho un errore TypeError: Cannot read property 'replace' of undefined da jquery (testato su google chrome) perché nel mio caso .color può essere nullo

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

Come posso farlo funzionare. So che c'è ngStyle ma non è proprio quello di cui ho bisogno.

fonte

2014-05-12 jcubic

si può creare un plunker o jsfiddle, mi piacerebbe piace vederlo attraverso i browser. – SoluableNonagon

usando .css() read richiede .css (propertyName), e set richiede element.css (propertyName, newValue), sembra che tu stia cercando di leggere piuttosto che impostare – SoluableNonagon

@EliteOctagon puoi anche usare css con oggetto. Volevo analizzare e creare oggetti usando $ eval. Forse dovrei usare JSON '{color: item.color}' come valore di attributo. – jcubic

Ok, prova a questo, ma io non sono sicuro se capisco perfettamente che cosa il vostro cercando di fare

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

curato l'html, non poteva provare questo su IE scorsa notte così abbiamo dovuto aspettare fino ad oggi. A quanto pare a IE non piace l'attributo di stile con il bind {{}} all'interno, quindi lo cancella dal DOM. Ho trovato questo problema https://github.com/angular/angular.js/issues/2186 e c'è un plunkr con la correzione fornita.

fonte

2014-05-12 15:18:55 johnnty

Non funziona, ottenuto 'TypeError: impossibile leggere la proprietà 'exp' di undefined' – jcubic

Additionaly' color: {{item.color | contrastColor}} 'restituisce un errore di analisi durante l'utilizzo di ng-style. – jcubic

Stai cercando di filtrare per contrastoColore? – johnnty

IE browser non è in grado di analizzare l'espressione angolare con l'attributo style, pertanto è necessario utilizzare ng-style anziché style per risolvere questo problema.

fonte

2015-10-20 05:37:22

Per me il cambio style a ng-attr-style ha risolto il problema. Testato su IE e Chrome. Spero che questo aiuti qualcun altro.

È possibile utilizzare {{ }} come questo:

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

fonte

2016-07-11 21:31:28

cambiare stile di NG-attr-stile risolve il problema e funziona bene in tutti i browser

fonte

2017-03-21 06:43:22

espressione angolare all'interno attributo di stile non funzionano in IE

risposta

Problemi correlati