0

I currently have this:

<div class="row status green" ng-repeat="green in report.data.green" style="{{green.image}}">

but the style is not showing up in IE. How can I solve these? green.image contains the following:

image = "background: linear-gradient(rgba("+ colordb[color] +",0.5), rgba("+ colordb[color] +",0.5)), url('../images/" + db[id][1] + "'); background-size: 100% 100%; background-size: cover;";
arturojain
  • 167
  • 1
  • 4
  • 15
  • Try using `ng-style="green.image"` – Leandro Zubrezki Oct 29 '15 at 05:02
  • Also which version of IE? linear-gradient is supported from 10+ http://caniuse.com/#search=linear-gradient – Leandro Zubrezki Oct 29 '15 at 05:03
  • IE11, it does not show anything if I do ng-style="green.image" – arturojain Oct 29 '15 at 05:05
  • sorry my bad, ng-style needs to be and object where keys are the css property and values the actual value, try changing image to an object with background as a property and the rest as the value and check. – Leandro Zubrezki Oct 29 '15 at 05:09
  • I have changed things to: `ng-style="{'background':green.image}"` and `image = "linear-gradient(rgba("+ colordb[color] +",0.5), rgba("+ colordb[color] +",0.5)), url('../images/" + db[id][1] + "');"` but I still doesn't show anything. – arturojain Oct 29 '15 at 05:15
  • you have background-size: 100% 100%; background-size: cover; – Leandro Zubrezki Oct 29 '15 at 05:27
  • I now have this `ng-style="{'background':'linear-gradient(rgba('+green.color+',0.5),rgba('+green.color+',0.5)), url(\'../images/'+green.image+'\')','background-size':'cover'}"` but I need to hide all if I have an empty image `(green.image)`. Finally, I need both the `background-size: 100% 100%` and `background-size: cover` – arturojain Oct 29 '15 at 05:48

1 Answers1

0

From the Angular's Doc

AngularJS 1.3 has dropped support for IE8. Read more about it on our blog. AngularJS 1.2 will continue to support IE8, but the core team does not plan to spend time addressing issues specific to IE8 or earlier.

And in your case I assume you're having angular 1.3+ version. So

Use ng-style tags instead of style="{{ someCss }}". The latter works in Chrome and Firefox but does not work in Internet Explorer <= 11 (the most recent version at time of writing).

If you're getting the problem again then you should inject the ngRoute service in your app init. I'd the same problem in IE and this trick worked for me

Your app init code should be

angular.module('myApp', ['ngRoute'])

.run(['$route', function ($route) {
            }])
.controller('MyCntrl', MyCntrl)
Vineet
  • 4,525
  • 3
  • 23
  • 42