kątowa wyrażenie wewnątrz atrybutu stylu nie działa w IE

mam kątowej 1.0.6 (wiem, że to stary) i mam atrybut stylu z wyrażeniami:kątowa wyrażenie wewnątrz atrybutu stylu nie działa w IE

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

to działa dobrze, ale nie dla IE (The aplikacja musi działać dla> IE10). Kiedy otwieram narzędzie dla programistów, atrybut stylu nie występuje. Próbuję utworzyć niestandardową dyrektywę stylu (ponieważ uważałem, że IE usuwa nieprawidłowy atrybut, zanim Angular może go odczytać), ale z tym prostym kodem, mam błąd TypeError: Cannot read property 'replace' of undefined z jquery (testowany na chrome Google), ponieważ w moim przypadku element .color może być pusty

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

Jak mogę to sprawić. Wiem, że istnieje ngStyle, ale nie jest to dokładnie to, czego potrzebuję.

Źródło

2014-05-12 jcubic

można utworzyć plunker lub jsfiddle, ja chcesz to zobaczyć w różnych przeglądarkach. – SoluableNonagon

używanie read .css() wymaga .css (propertyName), a zestaw wymaga elementu .css (propertyName, nowa wartość), wygląda na to, że próbujesz odczytać, a nie ustawić – SoluableNonagon

@EliteOctagon, możesz także użyć css z obiektem. Chciałem przeanalizować i utworzyć obiekt za pomocą $ eval. Może powinienem użyć JSON '{color: item.color}' jako wartości atrybutu. – jcubic

Ok, spróbuj tego, ale nie jestem pewien, czy w pełni zrozumieć, co staramy się robić

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

Zmieniano html, nie mógł przetestować to na IE ostatniej nocy, więc musieliśmy czekać aż do dzisiaj. IE najwyraźniej nie lubi atrybutu stylu z {{}} binding inside, więc usuwa go z DOM. Znalazłem ten problem https://github.com/angular/angular.js/issues/2186 i jest plunkr z podaną poprawką.

Źródło

2014-05-12 15:18:55 johnnty

Nie działa, ma "TypeError: Nie można odczytać właściwości" exp "z undefined' – jcubic

Dodatkowo' color: {{item.color | contrastColor}} 'return parse error podczas używania ng-style. – jcubic

Czy próbujesz filtrować przez kontrastColor? – johnnty

Przeglądarka IE nie może analizować wyrażenia kątowego za pomocą atrybutu style, więc w celu rozwiązania tego problemu należy użyć ng-style zamiast style.

Źródło

2015-10-20 05:37:22

Dla mnie zmiana style na ng-attr-style rozwiązała problem. Testowane w IE i Chrome. Mam nadzieję, że to pomoże komuś innemu.

Można użyć {{ }} takiego:

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

Źródło

2016-07-11 21:31:28

zmieniając styl NG-attr stylu rozwiązuje problemu i działa poprawnie we wszystkich przeglądarkach

Źródło

2017-03-21 06:43:22

kątowa wyrażenie wewnątrz atrybutu stylu nie działa w IE

Odpowiedz

Powiązane problemy