CODEWITHSUNDEEP
javascripttwitter-bootstrapangularjs
DavidC
DavidC

Reputation: 1862

angularjs and bootstrap javascript

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?

Upvotes: 2

Views: 6347

Answers (4)

Javier Perez
Javier Perez

Reputation: 21

I fixed the bug changing href by data-target

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

Upvotes: 2

Stephan Grobler
Stephan Grobler

Reputation: 469

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>

Upvotes: 1

Sharondio
Sharondio

Reputation: 2614

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

Upvotes: 4

Umur Kontacı
Umur Kontacı

Reputation: 35478

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.org/guide/directive

Upvotes: 0

Related Questions