>

각도 앱에 트위터 부트 스트랩 캐 러셀이 있습니다. data-slide 속성을 사용하면 다음과 같습니다.

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

그런 다음 href=#myCarousel  경로로 해석되고 현재 페이지가 다시로드됩니다. (HTML5 모드를 사용하고 있습니다)

다음으로 교체하여 회전식 메뉴를 작동시킬 수 있습니다 :

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

및 컨트롤러에서 :

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

그러나 이것을하는 올바른 방법은 무엇입니까?


  • 답변 # 1

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

  • 답변 # 2

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

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

  • 답변 # 3

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

  • 답변 # 4

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

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

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

  • 이전 PHP로 Zip 아카이브 압축 풀기
  • 다음 testing - Android 레이아웃 XML에서 AdMob에 대한 올바른 xmlns URL은 무엇입니까