I'm trying to use the AngularUI-Bootstrap (especially the carousel directive) in my app.
It works fine in Chrome, FF, Opera and IE9 but in IE8 it doesn't display the <img> tag inside the <slide> tag (or in my case <div slide></div>).
<div carousel interval="5000">
<div ng-repeat="image in dealerdetails.images" active="slide.active" slide>
<img src="{{image}}" />
</div>
</div>
When I just display {{image}}m it shows me the path to my image. That's correct but if I try to use <img src="{{image}}"> or with ng-src, it doesn't display at all.
Does anyone else have the same problem? It's just in IE8 and 7. IE7 is not important but I have to fix it in IE8.
<img src="{{img}}" />
is never a good idea in angular
Give this a try:
<img ng-src="{{img}}" />
That doesn't explain why is DOES work in other browsers, but letting angular do its thing with the ngSrc directive is a good idea in general
Unfortunately I'm on Linux and don't have IE8 access so I can't test for you.
There are a few patches floating around to fix this. I had to use a combination of this patch and using div carousel rather than the carousel tag to get it working in IE8.
this works for me: (with jquery-1.10.2 only in this page and with a div parent before the image)
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<div carousel interval="3000">
<div slide ng-repeat="slide in slides" active="slide.active">
<div style="text-align: center; align: center">
<img src="/img/articles/{{slide.image}}" alt="{{slide.title}}" style="margin: auto; text-align: center; align: center"/>
</div>
<div class="carousel-caption">
<p>{{slide.tittle}}</p>
<p>{{slide.content}}</p>
</div>
</div>
</div>
Just load jquery library for ie8 and it will be working, i don't know why, but may be because it has some optimizations for old browsers