3

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?

Tobias Kopelke
  • 33
  • 4

1 Answers1

2

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.

caffeinated.tech
  • 6,428
  • 1
  • 21
  • 40
  • And I took to long to edit the comment... I just saw that the link to the plnk was not working, I fixed that. Your solution is a bit more specific and should do the trick... now back to fiddling with ie-gradients – Tobias Kopelke Sep 05 '14 at 08:05
  • @TobiasKOpelke, on seeing your working plunker: wouldn't it be easier to create a directive with two divs which change their size relative to one another than to use the ill supported gradients (in legacy IE that is) – caffeinated.tech Sep 05 '14 at 08:15
  • Yes, that is the solution, with about 5 divs for more colors, I just implemented for my client. The gradient solution was one that already existed. The topic is none the less interesting as it bugs me that I cannot use angularJS for this... – Tobias Kopelke Sep 05 '14 at 11:28