解析背景色的值时出错-angularjs

Question

下面的代码，

<div style="background-color: {{ row.legend }}"></div>

执行得很好，

但komodo编辑器将错误显示Error in parsing value for 'background-color'

我尝试修改为： ng-style="'background-color': '{{ row.legend }}'" ，但是功能中断。

如何解决此错误？

Answer 1

始终使用带评估括号的ng-style over样式。

技术背景是某些浏览器会立即从DOM中删除无效的样式属性，因此angular以后将无法更新样式属性，即使那时它们将是有效的。

在你的例子中

<div style="background-color: {{ row.legend }}"></div>

可能会评估为

<div style="background-color: "></div>

首先，因此从DOM中删除。 如果row.legend之后使用有效值，则angular将无法相应地更新DOM。

内置指令ng-style不会发生这种情况。

为了完整性，我将重复@overexchange的答案

后一种情况的问题是缺少括号，因此解决方案是

<div ng-style="{'background-color': row.legend }"></div>