3

我正在尝试使用 angular 对元素应用渐变,但使用ngStyle.

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

老链接,失效了http://run.plnkr.co/maDs3PSWw4Y5tDfb/

在示例中,我使用的是 plain style="{{css}}",这不是文档中描述的推荐方法(短版,第 5 步)。它不会在 IE <= 11 中呈现。

如果我尝试ng-style="css"像这样使用和设置:

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

您会看到明显的问题,该css对象只能包含一个background.

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

4

1 回答 1

2

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

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

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

whilestyle="{{css}}"将适用于所有其他现代浏览器(即同时包含styleng-style)。

注意:我假设这style={{}}将在 < IE11 中静默失败

如果这对您不起作用,您始终可以专门为背景渐变创建指令。如果您在评论中需要帮助,请告诉我。

于 2014-09-04T15:13:55.060 回答