CODEWITHSUNDEEP
cssangularjslinear-gradientsng-style
Tobias Kopelke
Tobias Kopelke

Reputation: 33

AngularJS multiple backgrounds in ngStyle

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

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

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

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.

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 + ')'
  …
}

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

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?

Upvotes: 3

Views: 1355

Answers (1)

caffeinated.tech
caffeinated.tech

Reputation: 6548

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:

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+")"
};

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

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.

Upvotes: 2

Related Questions