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

Posted 2023-03-06

【中文标题】样式属性中的角度表达式在 IE 中不起作用

【英文标题】：Angular expression inside style attribute don't work in IE

【发布时间】：2014-06-29 21:49:55

【问题描述】：

我有 angular 1.0.6（我知道它很旧）并且我有带有表达式的样式属性：

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

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

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

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

【问题讨论】：

你能创建一个 plunker 或 jsfiddle，我想跨浏览器看看。

使用 .css() 读取需要 .css(propertyName)，而设置需要 element.css(propertyName, newValue)，看来您是在尝试读取而不是设置

@EliteOctagon 您也可以将 css 与对象一起使用。我想使用 $eval 解析和创建对象。也许我应该使用 JSON color: item.color 作为属性值。

【参考方案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 似乎不喜欢内部带有 绑定的样式属性，因此它将其从 DOM 中删除。我发现了这个问题 https://github.com/angular/angular.js/issues/2186 并且有一个给出修复的 plunkr。

【讨论】：

不行，得到TypeError: Cannot read property 'exp' of undefined

Additionaly color: item.color | contrastColor 在使用 ng-style 时返回解析错误。

您是否尝试按对比颜色进行过滤？

它是自定义过滤器，根据颜色返回白色或黑色。

你可以用ng-style="backgroundColor: section.color"不用换 ，还有你为什么要放angular js代码，我有我问过风格（我没问如何创建一个对比色滤镜），也是为什么你给我看$scope.items这不是我的问题。我没有在我的问题中包含该代码，因为它不相关。

【参考方案2】：

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

【参考方案3】：

对我来说，将 style 更改为 ng-attr-style 解决了这个问题。在 IE 和 Chrome 中测试。希望这对其他人有帮助。

你可以像这样使用 ：

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

【参考方案4】：

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