代码之家 › 专栏 › 技术社区 › Tobias Kopelke

ngStyle中的AngularJS多重背景

ng-style linear-gradients angularjs css

3

Tobias Kopelke · 技术社区 · 11 年前

我试图使用角度向元素应用渐变,但未能使用 ngStyle .

在示例中,我使用的是 style="{{css}}" ,这不是所描述的推荐方法 in the documentation (简短版本,步骤5)。它不会在IE中呈现<=11

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

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

你会看到明显的问题 css 对象只能包含 background .

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

1 回复 | 直到 11 年前

1

2

caffeinated.tech 11 年前

这是一个有趣的问题,我认为目前还不存在解决方案,尽管在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={{}} 将在<第11页

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