부트스트랩 카르셀이 angularjs와 함께 작동하지 않음

부트스트랩 카르셀이 angularjs와 함께 작동하지 않음

각도 js와 함께 부트스트랩 carousel을 사용하여 carousel 콘텐츠에 이미지를 표시하고 싶습니다.단, 네비게이션링크가 클릭되면 공백 페이지가 표시됩니다.

제 코드 샘플은 다음과 같습니다.(주: 이 코드는 Bootstrap 3.1.0에서만 정상적으로 동작하며 AngularJS 1.2.13에서는 동작하지 않습니다).

<div id="Carousel" class="carousel slide">
    <ol class="carousel-indicators">
        <li data-target="Carousel" data-slide-to="0" class="active"></li>
        <li data-target="Carousel" data-slide-to="1"></li>
        <li data-target="Carousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <img src="images/c.png" class="img-responsive">
        </div>
        <div class="item">
            <img src="images/b.png" class="img-responsive">
        </div>
        <div class="item">
            <img src="images/a.png" class="img-responsive">
        </div>
    </div>
    <a class="left carousel-control" href="#Carousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#Carousel" data-slide="next">
       <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

rbanning이 말한 내용을 바탕으로 이벤트핸들러를 추가하는 대신 앵커태그를 스팬태그로 대체한 후 href 속성을 "data-target" 속성으로 대체하고 부트스트랩이 나머지를 처리할 수 있습니다.

다음과 같은 경우:

<div id="Carousel" class="carousel slide">
<ol class="carousel-indicators">
    <li data-target="Carousel" data-slide-to="0" class="active"></li>
    <li data-target="Carousel" data-slide-to="1"></li>
    <li data-target="Carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
    <div class="item active">
        <img src="images/c.png" class="img-responsive">
    </div>
    <div class="item">
        <img src="images/b.png" class="img-responsive">
    </div>
    <div class="item">
        <img src="images/a.png" class="img-responsive">
    </div>
</div>
<span class="left carousel-control" data-target="#Carousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
</span>
<span class="right carousel-control" data-target="#Carousel" data-slide="next">
   <span class="glyphicon glyphicon-chevron-right"></span>
</span>
</div>

앞서 말한 바와 같이, 이 문제는 Angular에 있습니다.JS 및 ngRoute가 a-link 클릭을 대행 수신합니다.이 문제가 있었지만 Angular UI Bootstrap을 사용하고 싶지 않았습니다(다른 답변 참조).

따라서 .carousel-control 요소를 링크(태그)에서 span으로 변경했습니다.

<span class="left carousel-control" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
</span>
<span class="right carousel-control" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
</span>

그리고, 다음과 같이 이벤트 핸들러를 추가했습니다.

  $('.carousel').carousel({
                interval: 5000,
                pause: "hover",
                wrap: true
            })
            .on('click', '.carousel-control', handle_nav);

  var handle_nav = function(e) {
        e.preventDefault();
        var nav = $(this);
        nav.parents('.carousel').carousel(nav.data('slide'));
  }

이게 도움이 되길...

세트target="_self"회전목마 컨트롤:

<a class="left carousel-control" href="#Carousel" data-slide="prev" target="_self">

회전목마를 바인딩할 필요가 없는 경우 이 문제를 해결하려면 다음 명령을 사용하여 최상위 요소를 추가할 수 있습니다.ng-non-bindable지시:

<div ng-non-bindable>
    <div id="Carousel" class="carousel slide">
        <!-- carousel content -->
    </div>
</div>

두 컨트롤 모두 ng-click을 사용할 수도 있습니다.

제 사이트에서 사용하고 있습니다(주의).href=""현재 공백입니다.)

표시 중:

    <a class="left carousel-control" href="" ng-click="slide('prev')" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    </a>
    <a class="right carousel-control" ng-click="slide('next')" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    </a>

컨트롤러 내:

$scope.slide = function (dir) {
    $('#carouselId').carousel(dir);
};

코드는 정상적으로 동작합니다.

당신이 보여준 코드에는 아무런 문제가 없습니다.

http://plnkr.co/edit/1vq7DUXegQdBq3jvj7Zy?p=preview

Angular UI를 사용하여 부트스트랩과 Angular가 잘 어울리도록 하는 것은 어떨까요?

http://angular-ui.github.io/bootstrap/ #/carusel

편집:

네비게이션 링크에서 #Carousel에 href 속성이 설정되어 있기 때문에 코드가 작동하지 않습니다.따라서 이러한 링크를 클릭하면 Angular route Provider에 정의되어 있지 않은 Carousel이라는 링크가 변경되어 표시됩니다.이 때문에 공백 페이지가 됩니다.

Bootstrap.js 를 사용하고 있기 때문에, 이러한 href 어트리뷰트가 반드시 필요한 것 같기 때문에, 라우터를 삭제할 수도 있습니다.또는 Angular UI를 사용해 보십시오.)

이것은 원래 부트스트랩의 예를 변경하지 않고 동작합니다.

$("a.carousel-control").click(function(e){
    e.preventDefault();
    $(this).parent().carousel($(this).data("slide"));
});

기능을 만들어 html의 앞 화살표/다음 화살표 위에 배치할 수 있습니다.

$scope.prevSlide = function() {
    $('#MY-CAROUSEL-ID').carousel('prev');
};

언급URL : https://stackoverflow.com/questions/21907843/bootstrap-carousel-not-working-with-angularjs