Question

当我绘制div并设置背景色时，它可以完美地工作。

<div style="border:1px solid #f00; background-color:#00f;width:{{...

当我尝试将颜色设置为动态内联JS值时（为了简单起见，我使用固定的内联值），然后整个div折叠到2像素高和＆amp;宽。

<div style="border:1px solid #f00; background-color:#{{ "00f"}};width:{{...

test:#{{ "00f" }}

之后

test:#00f正确显示。为什么我的div会崩溃？我使用宽度的动态值，它很喜欢它

Answer 1

ngClass指令允许您通过数据绑定表示要添加的所有类的表达式，在HTML元素上动态设置CSS类。

<!-- whatever is typed into this input will be used as the class for the div below -->
<input type="text" ng-model="textType">

<!-- the class will be whatever is typed into the input box above -->
<div ng-class="textType">Look! I'm Words!</div>

Answer 2

使用angularJS获取动态样式的最佳方法是使用ng-class，正如Amit在第一个答案中提到的那样。但是，最好根据角度变量值处理ng-class，如下所示：

<div ng-class="{ '00f-background': awesome, 'normal-background': simple }

在这种情况下，如果awesome为true，则设置00f-background class，如果simple为true，则设置normal-background。

Answer 3

答案非常基本，标签{{...}}中的双引号显然应该是单引号 - 至少，如果字符串被包围为单引号，它就有效。它打破了样式元素这完全是为什么div缩小到零的原因。

<div style="border:1px solid #f00; background-color:#{{ '00f'}};width:{{...

正常工作。欣赏关于正确使用模型的建议 - 但这对于这个问题来说有点哲学，这就是为什么div打破内联使用的原因。

为什么我的内联JS会破坏我的div大小？

3 个答案: