I have a twitter bootstrap carousel in an angular app. If I use the data-slide attribute thus:

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

then the href=#myCarousel in interpreted as a route and the current page is reloaded. (I am using HTML5 mode)

I can get carousel working by replacing with this:

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

and in the controller:

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

but what is the right way to do this?

I have a twitter bootstrap carousel in an angular app. If I use the data-slide attribute thus:

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

then the href=#myCarousel in interpreted as a route and the current page is reloaded. (I am using HTML5 mode)

I can get carousel working by replacing with this:

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

and in the controller:

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

but what is the right way to do this?

• javascript
• twitter-bootstrap
• angularjs

4 Answers 4

Or...use this: Angular-UI - Bootstrap (includes a carousel directive.)

I fixed the bug changing href by data-target

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

Seeing as you put me on the right course to fix my issue I had, below is my directive and the 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>

No, it's not the right way. Do not do any DOM modifications inside the controller, ever. There are no exceptions on that. It's just bad practise.

What you want to do is use directives.

Here is the link to help you get started: http://docs.angularjs/guide/directive