在IE中，样式属性内的角度表达式不起作用

I have angular 1.0.6 (I know it's old) and I have style attribute with expressions:

我的角度是1。6(我知道它是老的)，我有风格属性和表达式:

<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

它运行良好，但不是IE(应用程序需要为>IE10工作)。当我打开Developer工具时，样式属性不存在。我尝试过创建自定义样式指令(因为我认为IE会在angle读取之前删除无效属性)，但是通过这个简单的代码，我得到了一个错误的TypeError:不能从jquery读取未定义的属性“replace”(在谷歌chrome上测试)，因为在我的case项中。颜色可以为空

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

我怎样才能让它工作呢?我知道有ngStyle，但它不是我所需要的。

4 个解决方案

#1

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.

编辑了html，昨晚无法在IE上测试，只能等到今天。IE似乎不喜欢带有{{{}}绑定的样式属性，所以它从DOM中删除它。我发现了这个问题，https://github.com/angular/angular.js/issues/2186，有一个柱塞与给定的修复。

#2

For me changing style to ng-attr-style solved the issue. Tested in IE and Chrome. Hope this helps someone else.

对于我来说，改变风格的ng- attrstyle解决了这个问题。在IE和Chrome中测试过。希望这能帮助别人。

You can use {{ }} like this:

您可以这样使用{}}:

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

#3

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.

IE浏览器不能用style属性解析角度表达式，所以应该使用ng-style而不是style来解决这个问题。

#4

changing style to ng-attr-style resolves the issue and works fine in all the browsers

将样式更改为ng- attrstyle可以解决这个问题，并且在所有浏览器中都能正常工作

#1