Angularjs And Bootstrap Javascript

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

Solution 1:

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

Solution 2:

I fixed the bug changing href by data-target

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

Solution 3:

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(){
        returnfunction(scope, elem, attrs) {
            scope.carouselPrev = function(){
                $('#'+attrs.id).carousel('prev');
            }

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

Html:

<divid="carousel-generic"class="carousel slide"data-slide="cycle"boot-carousel><!-- Indicators --><olclass="carousel-indicators"><lidata-target="#carousel-generic"data-slide-to="{{$index}}"ng-class="{'active': $index == 0, '': $index != 0}"ng-repeat="banner in banners"></li></ol><!-- Wrapper for slides --><divclass="carousel-inner"><divng-class="{'item active': $index == 0, 'item': $index != 0}"style="height: 340px; background: #c33"ng-repeat="banner in banners"><divng-bind-html-unsafe="banner.sContent"></div><divclass="carousel-caption"></div></div></div><!-- Controls --><aclass="left carousel-control"ng-click="carouselPrev()"href=""data-slide="prev"><imgsrc="images/Portal_header_arrowL.png"alt="Previous"></a><aclass="right carousel-control"ng-click="carouselNext()"href=""data-slide="next"><imgsrc="images/Portal_header_arrowR.png"alt="Next"></a>

Solution 4:

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