角度js应用具有ng风格的渐变

Question

无法使用角度js ng-style指令设置渐变..能够通过使用下面设置正常颜色

<span ng-style="{'background-color': slidercolor}">works</span>

但对于渐变它不起作用

下面是相同的jsfiddle.

<span ng-style="{'background-color':'-webkit-gradient(linear, left top, right top, color-    stop(0%,'slidercolor'), color-stop(100%,rgba(125,185,232,0)))'}">didnt work</span>

http://jsfiddle.net/sT8ar/1/

另外请告诉我哪些应该用引号括起来,哪些不应该...

Answer 1

你有两个问题:

1. -webkit-gradient()生产<image>,而不是<color>,它应该被用作background-image.
2. 在Angular表达式中,使用+(加号)完成连接.

所以正确的语法是(demo):

<span ng-style="{'background-image':'-webkit-gradient(linear, left top, right top,   color-stop(0%,'+ slidercolor+'), color-stop(100%,rgba(125,185,232,0)))'}">
  Works now too.
</span>