AngularJS在ngStyle多背景 [英] AngularJS multiple backgrounds in ngStyle

问题描述

我试图采用了棱角分明，但未能与 ngStyle 这样做梯度应用到元素。

I am trying to apply a gradient to an element using angular but failing to do so with ngStyle.

下面是什么，我尽量做到一个例子：
http://run.plnkr.co/plunks/mwJBcWaJ1hqOUCsSyy8a/

Here is an example of what I try to achieve: http://run.plnkr.co/plunks/mwJBcWaJ1hqOUCsSyy8a/

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

Old link, not working anymore http://run.plnkr.co/maDs3PSWw4Y5tDfb/

在这个例子中，我使用了普通的风格={{CSS}}，这是不是说明建议的方法的 /docs.angularjs.org/guide/ie相对=nofollow>（短版，第5步）。它不会在IE＆LT渲染。= 11

In the example I am using the plain style="{{css}}", which is not the recommended approach as described in the documentation (short version, step 5). It will not render in IE <= 11.

如果我尝试使用 NG-风格=CSS并设置是这样的：

If I try to use ng-style="css" and set up like this:

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

您会看到明显的问题， CSS 对象可以只包含的背景一个实例。

You'll see the obvious problem, the css object can just contain one instance of background.

我不认为许多情况下，我不得不浏览器的preFIX这样的。请问AngularJS解决这个以任何方式或有一个IE＆LT; = 11解

I cannot think of many instances where I'd have to browser-prefix like this. Does AngularJS address this in any way or is there a IE <= 11 solution?

推荐答案

这是一个有趣的问题，我不认为一个解决方案的那一刻，虽然看到，因为梯度之前没有IE 10中存在有可能是一个解决方法：

It's an interesting question and I don't think a solution exists at the moment, though seeing as gradients didn't exist prior to IE 10 there may be a work around:

有关IE 10，9和; 8为不存在冲突，您可以使用此功能。

For IE 10, 9 & 8 you can use this as no conflicts exist.

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

，而风格={{CSS}}将所有其他现代浏览器做（即包括风格和 NG-风格）。

while style="{{css}}" will do for all other modern browsers( ie. include both style and ng-style).

注意：我假设 =风格{{}} 将默默地上述＆lt失败; IE11

Note: I'm assuming that style={{}} will fail silently in < IE11

如果这不会为你工作，你总是可以创建一个特定的指令背景梯度。让我知道如果你需要，在注释帮助。

If this doesn't work for you, you could always create a directive specifically for background gradients. Let me know if you need help with that in the comments.

这篇关于AngularJS在ngStyle多背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！