Question

我有角度1.0.6（我知道它已经老了）我的风格属性带有表达式：

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

它工作正常但不适用于IE（应用程序需要适用于＆gt; IE10）。当我打开Developer工具时，style属性不存在。我尝试创建自定义样式指令（因为我认为IE在Angular可以读取它之前删除无效属性）但是使用这个简单的代码，我从jquery（在Google Chrome上测试）得到了错误TypeError: Cannot read property 'replace' of undefined，因为在我的情况下，item.color可以为null

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

我怎样才能让它发挥作用。我知道有ngStyle，但它不是我需要的。

Answer 1

好的，试试这个，但我不确定我是否完全明白你想做什么

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

编辑了html，昨晚无法在IE上测试，所以不得不等到今天。 IE似乎不喜欢带有{{}}绑定的style属性，因此它会从DOM中删除它。我发现了这个问题https://github.com/angular/angular.js/issues/2186并且找到了修复程序。

Answer 2

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}};"

Answer 3

IE浏览器无法使用style属性解析角度表达式，因此您应使用ng-style代替style来解决此问题。

Answer 4

将样式更改为ng-attr-style可以解决问题并在所有浏览器中正常工作

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

4 个答案: