0

I have a partial page with the angular-ui carousel plopped down in the middle of it. That directive has a template-url attached to it:

<carousel interval="0" no-wrap="false" template-url="/chooser/Pages/partials/carousel-tmpl.html">
    <slide ng-repeat="slideImg in slides" active="slide.active" actual="slideImg">
       <img ng-src="{{slideImg.image}}" style="margin:auto;">
     </slide>
</carousel>

slides is set up in a module like this: 

var slides = $scope.slides = [];

slides/slideImg is getting set up correctly at least in the main partial, because the image is showing up, but the thumbnails are not showing up, which I believe should be getting set up in the carousel-tmpl.html partial. What I'm getting is an image, and chevrons point left and right that scroll and little itty bitty green boxes towards the top of the picture that are the li elements, sans pictures. 

<div ng-mouseenter="pause()" ng-mouseleave="play()" class="carousel" ng-swipe-right="prev()" ng-swipe-left="next()">
    <div class="carousel-inner" ng-transclude></div>
    <a role="button" href class="left carousel-control" ng-click="prev()" ng-show="slides.length > 1">
        <span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">previous</span>
    </a>
    <a role="button" href class="right carousel-control" ng-click="next()" ng-show="slides.length > 1">
        <span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">next</span>
    </a>
    <ol class="carousel-indicators" ng-show="slides.length > 8">
        <li ng-repeat="slide in slides | orderBy:indexOfSlide track by $index" ng-class="{ active: isActive(slide) }" ng-click="select(slide)">
            <span class="sr-only">slide {{ $index + 1 }} of {{ slides.length }}<span ng-if="isActive(slide)">, currently active</span></span>
            <img ng-src="{{slide.actual.thumb}}" />
        </li>
    </ol>
</div>

I have this working in a plunker, but I can't seem to get this working in real code.

Any help would be awesome.

spuppett
  • 547
  • 10
  • 26
  • It maybe a version issue, could you try to update it to the latest version of angular and ui.bootstrap ? – themyth92 Oct 09 '15 at 03:05
  • That was my thought too. Unfortunately, we're tied to angular 1.2 because we still need to support IE 8, and from what I understand, that's the latest version that will work with IE 8. – spuppett Oct 09 '15 at 12:54
  • I was able to get my plunker downgraded to the same versions of the dependencies, and now it's broken in the same way. I've rarely been this excited to see something break. – spuppett Oct 09 '15 at 14:05

0 Answers0