AngularJS在ngStyle中的多个背景

Question

我正在尝试使用angular将渐变应用于元素但未使用ngStyle执行此操作。

以下是我尝试实现的示例： http://run.plnkr.co/plunks/mwJBcWaJ1hqOUCsSyy8a/

旧链接，不再工作 http://run.plnkr.co/maDs3PSWw4Y5tDfb/

在示例中，我使用的是普通style="{{css}}"，这不是in the documentation所述的推荐方法（简短版本，步骤5）。它不会在IE＆lt; = 11中呈现。

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

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

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

我想不出很多我必须像这样浏览器前缀的情况。 AngularJS是以任何方式解决这个问题，还是IE＆lt; = 11解决方案？

Answer 1

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

对于IE 10,9＆amp; 8你可以使用它，因为不存在冲突。

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

虽然style="{{css}}"适用于所有其他现代浏览器（即同时包含style和ng-style）。

注意：我假设style={{}}在＆lt; {1}}中无声地失败IE11

如果这对您不起作用，您可以随时创建专门针对背景渐变的指令。如果您在评论中需要帮助，请告诉我。