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

你有两个问题：

-webkit-gradient()生成<image>，而不是<color>，它应该用作background-image。
在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>

Answer 2

希望对您有帮助。

控制器

private setStyles() {
  const rgbaGradientStart = hexToRgba(this.hexGradientStart, 1);
  const rgbaGradientEnd = hexToRgba(this.hexGradientEnd, 0.1);
  const gradientParams = `left, ${rgbaGradientStart} 0%, ${rgbaGradientEnd} 50%`;

  this.gradientStyles = {
    'background-image': `-webkit-linear-gradient(${gradientParams})`,
    // 'background-image': `-moz-linear-gradient(${gradientParams})`,
    // 'background-image': `-o-linear-gradient(${gradientParams})`,
    // 'background-image': `-ms-linear-gradient(${gradientParams})`,
    // 'background-image': `linear-gradient(${gradientParams})`,
  }
}

模板

<div
  class="super-gradient"
  [ngStyle]="gradientStyles"
></div>

P.S .：您可能对此也有兴趣
https://github.com/angular/angular/issues/11362#issuecomment-244816438

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

2 个答案: