4

angular ui ブートストラップ カルーセルを使用しており、インジケーターのサムネイルを作成したいと考えています。私はこのようなコントローラーを持っています(デモから):

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

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 1.5.8と共にAngular UI Boostrap 1.3.3を使用しています。

これがそのフィドルですhttps://jsfiddle.net/logus/6mvjpf40/

于 2016-10-30T12:16:41.007 に答える