web-dev-qa-db-ja.com

Bootstrap Angularjsでカルーセルが動作しない

bootstrap= carouselをangular jsと一緒に使用して、カルーセルコンテンツ内の画像を表示します。ただし、ナビゲーションリンクをクリックすると、空白ページが表示されます。

私のコードサンプルは次のとおりです。 （注：このコードはBootstrap 3.1.でのみ機能しますが、AngularJS 1.2.1と一緒には機能しません）

<div id="Carousel" class="carousel slide">
    <ol class="carousel-indicators">
        <li data-target="Carousel" data-slide-to="0" class="active"></li>
        <li data-target="Carousel" data-slide-to="1"></li>
        <li data-target="Carousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <img src="images/c.png" class="img-responsive">
        </div>
        <div class="item">
            <img src="images/b.png" class="img-responsive">
        </div>
        <div class="item">
            <img src="images/a.png" class="img-responsive">
        </div>
    </div>
    <a class="left carousel-control" href="#Carousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#Carousel" data-slide="next">
       <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>
angularjstwitter-bootstrapcarousel
28
Rakesh

イベントハンドラを追加する代わりに、アンカータグをスパンタグに置き換えた後、hban属性を「data-target」属性に置き換え、bootstrapが処理します残りの。

そのようです：

<div id="Carousel" class="carousel slide">
<ol class="carousel-indicators">
    <li data-target="Carousel" data-slide-to="0" class="active"></li>
    <li data-target="Carousel" data-slide-to="1"></li>
    <li data-target="Carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
    <div class="item active">
        <img src="images/c.png" class="img-responsive">
    </div>
    <div class="item">
        <img src="images/b.png" class="img-responsive">
    </div>
    <div class="item">
        <img src="images/a.png" class="img-responsive">
    </div>
</div>
<span class="left carousel-control" data-target="#Carousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
</span>
<span class="right carousel-control" data-target="#Carousel" data-slide="next">
   <span class="glyphicon glyphicon-chevron-right"></span>
</span>
</div>
69
chestermano

前述のように、問題はAngularJSとngRouteがa-linkクリックをインターセプトすることです。私はこの問題を抱えていましたが、Angular UI Bootstrap（他の回答で説明されているように）。

そこで、.carousel-control要素をリンク（aタグ）からスパンに変更しました。

<span class="left carousel-control" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
</span>
<span class="right carousel-control" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
</span>

次に、次のようにイベントハンドラーを追加しました...

  $('.carousel').carousel({
                interval: 5000,
                pause: "hover",
                wrap: true
            })
            .on('click', '.carousel-control', handle_nav);

  var handle_nav = function(e) {
        e.preventDefault();
        var nav = $(this);
        nav.parents('.carousel').carousel(nav.data('slide'));
  }

お役に立てれば...

11
rbanning

カルーセルコントロールでtarget="_self"を設定します。

<a class="left carousel-control" href="#Carousel" data-slide="prev" target="_self">
6
Robert Weindl

カルーセルをバインドする必要がない場合は、ng-non-bindableディレクティブでトップレベル要素を追加することでこれを解決できます。

<div ng-non-bindable>
    <div id="Carousel" class="carousel slide">
        <!-- carousel content -->
    </div>
</div>
5
aaregall

両方のコントロールでngキーを押しながらクリックすることもできます。

私は自分のサイトでこれを使用しています（注href=""は現在空白です）

ビューで：

    <a class="left carousel-control" href="" ng-click="slide('prev')" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    </a>
    <a class="right carousel-control" ng-click="slide('next')" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    </a>

コントローラー内：

$scope.slide = function (dir) {
    $('#carouselId').carousel(dir);
};
4
supersan

関数を作成して、htmlの前/次の矢印に配置できます。

$scope.prevSlide = function() {
    $('#MY-CAROUSEL-ID').carousel('prev');
};
0
Jassma

コードは正常に機能します。

示したコードに問題はありません。

http://plnkr.co/edit/1vq7DUXegQdBq3jvj7Zy?p=preview

0
Chen-Tsu Lin

これは、元のbootstrap=の例を変更せずに機能します

$("a.carousel-control").click(function(e){
    e.preventDefault();
    $(this).parent().carousel($(this).data("slide"));
});
0
ronald8192

Angular UIを取得してBootstrapとAngularを一緒に再生するにはどうすればよいですか？

http://angular-ui.github.io/bootstrap/#/carousel

編集：

ナビゲーションリンクの#Carouselにhref属性が設定されているため、コードが機能していません。これらのリンクをクリックすると、Angularルーターはビューを変更し、$ routeProviderで定義されていないCarouselという名前のページを表示しようとするため、空白ページになります。

Bootstrap.jsを使用しているため、これらのhref属性が絶対に必要なようで、ルーターを削除することもできます。またはAngular UI;）を試してください

0
jc-tzn