Lots of AngularJS frames in ngStyle
I am trying to apply a gradient to an element using angular but failing to accomplish this with ngStyle
.
Here is an example of what I am trying to achieve: http://run.plnkr.co/plunks/mwJBcWaJ1hqOUCsSyy8a/
Old link, no longer working http://run.plnkr.co/maDs3PSWw4Y5tDfb/
For the example I am using a simple style="{{css}}"
, which is not the recommended approach as described in the documentation (short version, step 5). It will not display in IE <= 11.
If I try to use ng-style="css"
and tune like this:
$scope.css = {
background: '-webkit-linear-gradient(' + gradient + ')',
background: '-moz-linear-gradient(' + gradient + ')'
…
}
You will see an obvious problem, an object css
can only contain one instance background
.
I can't think of many cases where I would need to use a browser like this. Does AngularJS address this solution anyway or is there an IE <= 11 solution?
source to share
This is an interesting question and I don't think there is a solution at the moment, although seeing that gradients did not exist before IE 10, there is perhaps a work-around:
For IE 10, 9 and 8, you can use this as conflicts don't exist.
$scope.css = {
'-ms-filter' : "progid:DXImageTransform.Microsoft.gradient ("+iegradient+")",
'background' : "linear-gradient("+gradient+")"
};
a style="{{css}}"
- for all other modern browsers (i.e. includes both style
and ng-style
).
Note. ... I am guessing it style={{}}
will fail in <IE11
If that doesn't work for you, you can always create a directive specifically for background gradients. Let me know if you need help in the comments.
source to share