Question

我有一个部分页面，其中angular-ui carousel位于其中间。该指令附有一个模板URL：

<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 = [];

幻灯片/ slideImg至少在主要部分正确设置，因为图像显示，但缩略图没有显示，我认为应该在carousel-tmpl.html partial中设置。我得到的是一个图像，并且V形图指向左右滚动，并且向图片的顶部滚动了一些小的绿色框，它们是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中使用了这个，但我似乎无法在实际代码中使用它。

任何帮助都会很棒。

我在这个模板中丢失了范围吗？

0 个答案: