Bootstrap carousel not working with angularjs

问题:

I want to use bootstrap carousel along with angular js to display images in carousel content. But, when the navigation links clicked, it displays blank page.

My code sample is as follows. (Note : This code works well only with Bootstrap 3.1.0 but not along with AngularJS 1.2.13)

<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>

回答1:

Building on what rbanning said, instead of adding the event handler you can just, after replacing the anchor tags with span tags, replace the href attribute with a "data-target" attribute and bootstrap takes care of the rest.

Like so:

<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>

回答2:

As mentioned, the issue is with AngularJS and ngRoute intercepting the a-link clicks. I had this problem but did not want to use Angular UI Bootstrap (as described in other answers).

So, I changed the .carousel-control elements from links (a tags) to spans.

<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>

Then, I added an event handler as follows...

  $('.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'));
  }

Hope this helps...

回答3:

Set target="_self" in your carousel controls:

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

回答4:

If you don't need to bind your carousel, you can solve this by adding a top level element with ng-non-bindable directive:

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

回答5:

You can also just use ng-click on both controls.

I'm using this on my site (note href="" is blank now)

In view:

    <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>

In controller:

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

回答6:

Your code works fine.

No any problem in the code you showed.

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

回答7:

Why not use Angular UI to get Bootstrap and Angular to play along nicely ?

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

EDIT:

Your code isn't working because on the navigation links you have href attributes set at #Carousel. So when you click on those links Angular router will try to change view and to display the one called Carousel which isn't defined in your $routeProvider hence the blank page.

Since you're using Bootstrap.js it seems like you absolutely need these href attributes so maybe get rid of the router. Or give a try to Angular UI ;)

回答8:

This works, without modify the original bootstrap example

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

回答9:

You can make function and place it on prev/next arrow in html.

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