如何使用AngularJS给元素设置动态生成的多色渐变背景

• 渐变字符串兼容性问题：你代码中拼接了浏览器前缀，要注意带前缀的linear-gradient不支持to right方向写法，比如-webkit-linear-gradient的水平从左到右渐变需要把方向参数写为left，如果前缀和方向不匹配会直接导致渐变失效。你可以先去掉GlobalFunction.getCssValuePrefix()前缀，直接测试标准无前缀的渐变语法，验证字符串本身是否合法。
• 样式被覆盖：Fomantic Accordion初始化时会给组件内层的.title、.content元素添加默认背景样式，即使你给外层容器设置了背景，也可能被子元素的不透明背景覆盖。你可以打开浏览器开发者工具查看对应元素的样式，确认你设置的background-image是否被添加到元素上，是否有更高优先级的样式将其划掉。
• 执行时机问题：你当前的$timeout没有设置延迟参数，可能存在Accordion还未完成初始化就执行了样式设置，后续被组件初始化逻辑覆写样式的情况。

1. 先验证渐变字符串有效性：把console.log输出的backgroundString复制到开发者工具的元素样式面板手动添加，确认手动设置可以生效后再调整代码逻辑。
2. 调整方向适配逻辑：如果需要保留浏览器前缀，对应修改方向参数：

// 示例兼容写法
const prefix = GlobalFunction.getCssValuePrefix();
let direction = 'to right';
if (prefix.includes('webkit')) {
  direction = 'left';
}
var backgroundString = prefix + `linear-gradient(${direction}`;

3. 调整执行时机：要么给$timeout增加100ms延迟确保组件初始化完成，要么将背景设置逻辑放到Fomantic Accordion的onInit回调中执行。

首先在控制器中定义生成样式对象的方法：

vm.getAccordionBgStyle = function(question) {
  const colors = vm.candidateAssignedTagColors(question);
  if (!colors.length) return {};
  // 生成标准语法渐变
  let standardGrad = 'linear-gradient(to right';
  // 生成webkit兼容渐变
  let webkitGrad = '-webkit-linear-gradient(left';
  colors.forEach((color, index) => {
    const percentage = ((index + 1) / colors.length) * 100;
    standardGrad += `,${color} ${percentage}%`;
    webkitGrad += `,${color} ${percentage}%`;
  });
  standardGrad += ')';
  webkitGrad += ')';
  return {
    'background-image': `${standardGrad} !important`,
    '-webkit-background-image': `${webkitGrad} !important`
  };
};

然后在模板的Accordion元素上直接绑定ng-style：

<div 
  id="question_accordion_{{question.id}}"
  ng-init="vm.initializeAccordion(question)"
  ng-style="vm.getAccordionBgStyle(question)"
  class="ui accordion"
>
<!-- 组件内容 -->
</div>

如果需要适配更多内核浏览器，只要在返回的样式对象中添加对应前缀的属性即可。

内容的提问来源于stack exchange，提问作者J. Finn