ngStyle中的AngularJS多个背景

Posted 2023-03-06

【中文标题】ngStyle中的AngularJS多个背景

【英文标题】：AngularJS multiple backgrounds in ngStyle

【发布时间】：2014-10-29 07:50:45

【问题描述】：

我正在尝试使用 angular 对元素应用渐变，但使用 ngStyle 失败。

这是我尝试实现的一个示例： http://run.plnkr.co/plunks/mwJBcWaJ1hqOUCsSyy8a/

旧链接，失效了http://run.plnkr.co/maDs3PSWw4Y5tDfb/

在示例中，我使用的是普通的style="css"，这不是in the documentation 所述的推荐方法（简短版本，第 5 步）。它不会在 IE

如果我尝试使用 ng-style="css" 并进行如下设置：

$scope.css = 
  background: '-webkit-linear-gradient(' + gradient + ')',
  background: '-moz-linear-gradient(' + gradient + ')'
  …

您会看到一个明显的问题，css 对象只能包含 background 的一个实例。

我想不出很多情况下我必须像这样使用浏览器前缀。 AngularJS 是否以任何方式解决了这个问题，或者是否有 IE

【参考方案1】：

这是一个有趣的问题，我认为目前不存在解决方案，尽管在 IE 10 之前不存在渐变，因此可能有解决方法：

对于 IE 10、9 和 8，您可以使用它，因为不存在冲突。

$scope.css = 
   '-ms-filter' : "progid:DXImageTransform.Microsoft.gradient ("+iegradient+")",
   'background' : "linear-gradient("+gradient+")"
;

而style="css" 将适用于所有其他现代浏览器（即包括style 和ng-style）。

注意：我假设style= 在 中会静默失败

如果这对您不起作用，您始终可以创建一个专门用于背景渐变的指令。如果您在 cmets 中需要帮助，请告诉我。

【讨论】：

我花了很长时间来编辑评论...我只是看到 plnk 的链接不起作用，我修复了它。您的解决方案更具体一点，应该可以解决问题......现在回到摆弄 ie-gradients

@TobiasKOpelke，看到您的工作 plunker：创建一个具有两个 div 的指令会不会更容易，这两个 div 会改变它们相对于彼此的大小，而不是使用不支持的渐变（在旧版 IE 中是）

是的，这就是解决方案，大约 5 个 div 用于更多颜色，我刚刚为我的客户实施。梯度解决方案是一种已经存在的解决方案。这个话题仍然很有趣，因为它让我觉得我不能为此使用 angularJS...