javascript - Angular js applying Gradients with ng style - Stack Overflow

admin管理员组

文章数量:1345131

Unable to set gradients using angular js ng-style directive.. able to set normal color by using below

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

But for gradient it doesnt work

Below is the jsfiddle for the same.

<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>

/

Also please let me know which should be enclosed in quotes and which should not..

Unable to set gradients using angular js ng-style directive.. able to set normal color by using below

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

But for gradient it doesnt work

Below is the jsfiddle for the same.

<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/sT8ar/1/

Also please let me know which should be enclosed in quotes and which should not..

• javascript
• html
• css
• angularjs

Share Improve this question Follow edited Sep 21, 2013 at 19:48 Pavlo 45k1414 gold badges8383 silver badges114114 bronze badges asked Sep 21, 2013 at 18:32 anandaravindananandaravindan 2,55166 gold badges2929 silver badges3737 bronze badges 3

• what browser are you using? – box86rowh Commented Sep 21, 2013 at 18:39
• this one should work on ie10: jsfiddle/sT8ar/2 – box86rowh Commented Sep 21, 2013 at 18:43
• the issue is most browsers require different code to display a gradient, what you have is meant for webkit browsers only, like chrome and safari. – box86rowh Commented Sep 21, 2013 at 18:44

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

You got two problems here:

1. -webkit-gradient() produces <image>, not <color>, it shoud be used as background-image.
2. In Angular expression concatenation is done with a + (plus sign).

So the correct syntax is (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>

I hope this helps you.

controller

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})`,
  }
}

template

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

P.S.: you may also be interested in this
https://github./angular/angular/issues/11362#issuement-244816438

本文标签： javascriptAngular js applying Gradients with ng styleStack Overflow