我有一个部分页面,其中有angular-ui 轮播。该指令附加了一个模板网址:
<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>
幻灯片是在这样的模块中设置的:
var slides = $scope.slides = [];
slides/slideImg 至少在主要部分中设置正确,因为图像正在显示,但缩略图没有显示,我认为应该在 carousel-tmpl.html 部分中设置。我得到的是一个图像,人字形指向左右滚动和指向图片顶部的小绿色小盒子,它们是li
元素,没有图片。
<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>
我有这个在plunker工作,但我似乎无法让它在真实代码中工作。
任何帮助都是极好的。