Question

我正在使用角度ui bootstrap轮播，我想制作指标缩略图。我有一个看起来像这样的控制器（来自演示）：

function carouselCtrl($scope) {
  $scope.myInterval = 5000;
  $scope.imgPath="img/slideshow/"
  var slides = $scope.slides = [{
    'imgName':'iguanas.jpg',
    'caption':'Marine iguanas in the Galapagos National Park on Santa Cruz Island, on September 15, 2008.',
    'author':'(Reuters/Guillermo Granja)'
  },{
    'imgName':'eruption.jpg',
    'caption':'In June of 2009, the Cerro Azul volcano on Isabela Island was in an active phase, spewing molten lava into the air, spilling it across its flanks, and widening existing lava flows.',
    'author':'(Reuters/Parque Nacional Galapagos)'
  },{
    'imgName':'bluefoot.jpg',
    'caption':'A close-up of a pair of Booby feet, photographed in March of 2008. ',
    'author':'(CC BY Michael McCullough)'
  }];

}

，模板如下所示：

<div ng-mouseenter="pause()" ng-mouseleave="play()" class="carousel">
    <ul class="carousel-indicators" ng-show="slides().length > 1">
        <li ng-repeat="slide in slides()" class="slide-thumb" ng-class="{active: isActive(slide)}" ng-click="select(slide)"></li>

    </ul>
    <div class="carousel-inner" ng-transclude></div>
    <a ng-click="prev()" class="carousel-control left" ng-show="slides().length > 1">&lsaquo;</a>
    <a ng-click="next()" class="carousel-control right" ng-show="slides().length > 1">&rsaquo;</a>
</div>

我想做这样的事情：

<li ng-repeat="slide in slides()" class="slide-thumb" ng-class="{active: isActive(slide)}" ng-click="select(slide)" style="background-image:url({{slide.imgName}});"></li>

但我必须超出范围或某事......有没有人知道任何有缩略图选项的角度轮播或如何让它工作？

Answer 1

轮播模板中的幻灯片数组实际上并未引用您在应用控制器中定义的幻灯片数组。

在轮播模板中，幻灯片引用了一堆用内部属性增强的dom元素。这就是为什么对你在对象中定义的属性的任何访问都会在执行时失败（范围问题，因为你已经猜到了）。

如果你想从angular-ui坚持旋转木马，我会推荐一种稍微不同的方法，并采用类似的css造型：

  //Default styles for indicator elements
  .carousel-indicators li { 
    background-size : 42px 22px; 
    width : 42px;
    height: 22px;
    background-repeat : no-repeat;
    background-position : center;
    cursor : pointer;
  }

  // Then Specify a background image for every slide
  .carousel-indicators li:nth-child(1){
    background-image: url(http://cache.wallpaperdownloader.com/bing/img/WeddedRocks_20100418.jpg);
  }

  ...

你可以看到一个有效的Plunker here。

Answer 2

这很有可能，而且非常简单。首先，您必须传递实际指令中每张幻灯片的模型，如 uib-slide设置的docs所示。然后，您必须使用 template-url 指令覆盖模板。别忘了申报模板。

所以 html 应如下所示：

<!--Defining the controller scope-->
<div ng-controller="carousel">
<!--Declaring the template for later usage-->
<script id="carousel-with-thumbs.html" type="text/ng-template">
<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-class="{ disabled: isPrevDisabled() }"
       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-class="{ disabled: isNextDisabled() }"
       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 > 1">
        <li ng-repeat="slide in slides | orderBy:indexOfSlide track by $index"
            ng-class="{ active: isActive(slide) }" ng-click="select(slide)">
            <!--Showing the thumbnail in a <img> tag -->
            <img ng-src="{{slide.slide.actual.thumb}}">
            <span class="sr-only">slide {{ $index + 1 }} of {{ slides.length }}<span ng-if="isActive(slide)">, currently active</span></span>
        </li>
    </ol>
</div>
</div>
</script>

<uib-carousel active="active" interval="interval" template-url="carousel-with-thumbs.html">
<uib-slide ng-repeat="slide in slides track by $index" index="$index" actual="slide">
    <!--Passing the slide in the actual directive-->
    <img ng-src="{{slide.image}}" style="margin:auto;">
    <div class="carousel-caption">
        <h4>{{slide.title}}</h4>
        <p>{{slide.text}}</p>
    </div>
</uib-slide>
</uib-carousel>

花点时间分析carousel-indicators有序列表：

<ol class="carousel-indicators" ng-show="slides.length > 1">
    <li ng-repeat="slide in slides | orderBy:indexOfSlide track by $index" ng-class="{ active: isActive(slide) }"
    ng-click="select(slide)">
        <img ng-src="{{slide.slide.actual.thumb}}">
        <span class="sr-only">slide {{ $index + 1 }} of {{ slides.length }}<span ng-if="isActive(slide)">, currently active</span></span>
    </li>
</ol>

了解每个slide模型如何具有另一个slide子模型，该子模型是通过的幻灯片模型的转换范围通过actual指令。然后，再次嵌套，actual模型包含每张幻灯片的所有数据：

<img ng-src="{{slide.slide.actual.thumb}}">

当然，对于最后的结局，控制器应如下所示：

(function(){
    'use strict';
    angular
        .module('app', ['ui.bootstrap'])
        .controller('carousel', carousel);

        carousel.$inject = ['$scope'];

        function carousel($scope){
            $scope.active = 0;
            $scope.interval = 5000;
            $scope.slides = [
                {title: "Any title", text: "This is a text for the slide", image: "path/to/the/image/image.jpg", thumb:  "path/to/the/image/thumbs/thumb.jpg"},
                {title: "Any title", text: "This is a text for the slide", image: "path/to/the/image/image.jpg", thumb: "path/to/the/image/thumbs/thumb.jpg"},
                {title: "Any title", text: "This is a text for the slide", image: "path/to/the/image/image.jpg", thumb: "path/to/the/image/thumbs/thumb.jpg"}
            ];
    }
})();

顺便说一句，我使用 Angular UI Boostrap 1.3.3 以及 Angular 1.5.8。

这里是小提琴https://jsfiddle.net/logus/6mvjpf40/

如何使用控制器中的模型以角度ui使用缩略图制作轮播指示器？

2 个答案: