javascript - Angular js应用具有ng风格的渐变

Question

无法使用 Angular 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>

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>

PS：你可能也对这个
https://github.com/angular/angular/issues/11362#issuecomment-244816438感兴趣