2

angularアプリにtwitterブートストラップカルーセルがあります。このように data-slide 属性を使用すると:

<a data-slide="prev" href="#myCarousel" class="left carousel-control">&lsaquo;</a>

はhref=#myCarouselルートとして解釈され、現在のページがリロードされます。(私は HTML5 モードを使用しています)

これに置き換えることで、カルーセルを機能させることができます：

<a href="#" class="left carousel-control" ng-click="carouselPrev()">&lsaquo;</a>

そしてコントローラーで：

$scope.carouselPrev = function(){
    $('#myCarousel').carousel('prev');
};

しかし、これを行う正しい方法は何ですか?

4

4 に答える 4

4

または...これを使用してください：Angular-UI - Bootstrap（カルーセルディレクティブが含まれています。）

于 2013-02-14T17:50:19.480 に答える
2

data-target で href を変更するバグを修正しました

<a data-slide="prev" data-target="#myCarousel" class="left carousel-control">&lsaquo;</a>
于 2014-07-25T18:39:05.357 に答える
1

私が抱えていた問題を解決するためにあなたが私を正しい道に導いてくれたのを見て、以下は私のディレクティブとhtmlです

angular.module('portal.directives', [])
    .directive('bootCarousel', function(){
        return function(scope, elem, attrs) {
            scope.carouselPrev = function(){
                $('#'+attrs.id).carousel('prev');
            }

            scope.carouselNext = function(){
                $('#'+attrs.id).carousel('next');   
            }
        }
    });

HTML:

<div id="carousel-generic" class="carousel slide"  data-slide="cycle"  boot-carousel>
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-generic" data-slide-to="{{$index}}" ng-class="{'active': $index == 0, '': $index != 0}" ng-repeat="banner in banners"></li>

    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        <div ng-class="{'item active': $index == 0, 'item': $index != 0}" style="height: 340px; background: #c33"  ng-repeat="banner in banners">
            <div ng-bind-html-unsafe="banner.sContent"></div>
            <div class="carousel-caption">

            </div>
        </div>
    </div>
    <!-- Controls -->
    <a class="left carousel-control" ng-click="carouselPrev()" href="" data-slide="prev">
        <img src="images/Portal_header_arrowL.png" alt="Previous">
    </a>
    <a class="right carousel-control" ng-click="carouselNext()" href="" data-slide="next">
        <img src="images/Portal_header_arrowR.png" alt="Next">
    </a>
于 2013-09-11T07:36:59.770 に答える