4

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

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>

但我必须超出范围或其他东西......有谁知道任何有缩略图选项的角度旋转木马或者我怎样才能让它工作？

4

2 回答 2

3

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

在轮播模板中，幻灯片指的是一堆用内部属性增强的 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 。

于 2013-10-30T17:39:20.403 回答
0

这是很有可能的，而且非常简单。首先，您必须在实际指令中传递每张幻灯片的模型，如uib-slide settings的文档中所示。然后您必须使用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/

于 2016-10-30T12:16:41.007 回答