angularjs와 부트 스트랩 자바 스크립트

아니면 이것을 사용하십시오 : Angular-UI-부트 스트랩 (캐 러셀 지시문 포함)

데이터 대상에 따라 href가 변경되는 버그를 수정했습니다

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

내 문제를 해결하기 위해 올바른 과정을 밟으면 다음은 내 지시문과 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');   
            }
        }
    });

단어 :

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

아니요, 올바른 방법이 아닙니다. 컨트롤러 내부에서 DOM을 수정하지 마십시오. 이에 대한 예외는 없습니다. 그냥 나쁜 연습이야.

당신이하고 싶은 것은 directives 를 사용하는 것입니다 .

시작하는 데 도움이되는 링크는 다음과 같습니다. http://docs.angularjs.org/guide/directive