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

<a data-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(){
        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>

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