I have angular 1.0.6 (I know it's old) and I have style attribute with expressions:
<li style="background-color: {{item.color}}">
<span style="color: {{item.color | contrastColor}}">{{item.label}}</span>
</li>
It work fine but not for IE (The app need to work for >IE10). When I open Developer tool the style attribute is not present. I've try to create custom style directive (because I tought that IE remove invalid attribute before Angular can read it) but with this simple code, I've got an error TypeError: Cannot read property 'replace' of undefined
from jquery (tested on google chrome) because in my case item.color can be null
.directive("logStyle", function() {
// logStyle directive
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.css(scope.$eval(attrs.logStyle));
}
};
});
How can I make it work. I know that there is ngStyle but it's not quite what I need.
Ok, try this but I'm not sure if I fully understand what your trying to do
<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 the html, couldn't test this on IE last night so had to wait until today. IE seemingly doesn't like the style attribute with {{ }} binding inside so it deletes it from the DOM. I found this issue https://github.com/angular/angular.js/issues/2186 and there is a plunkr with the fix given.
For me changing style
to ng-attr-style
solved the issue. Tested in IE and Chrome. Hope this helps someone else.
You can use {{ }}
like this:
ng-attr-style="color:{{entity.status | statusColor}};"
IE browser is not able to parse angular expression with style
attribute so You should use ng-style
instead of style
to resolve this problem.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With