Карусель Bootstrap не работает с angularjs

Ответ 1

Основываясь на том, что сказал rbanning, вместо добавления обработчика событий вы можете просто после замены меток привязки тегами span заменить атрибут href атрибутом "data-target", а bootstrap заботится об остальном.

Так же:

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

Ответ 2

Как уже упоминалось, проблема заключается в том, что AngularJS и ngRoute перехватывают клики a-link. У меня была эта проблема, но я не хотел использовать Angular UI Bootstrap (как описано в других ответах).

Итак, я изменил элементы управления .carousel из ссылок (теги a) на промежутки.

<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'));
  }

Надеюсь, что это поможет...

Ответ 3

Если вам не нужно связывать свою карусель, вы можете решить эту проблему, добавив элемент верхнего уровня с директивой ng-non-bindable:

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

Ответ 4

Задайте target="_self" в настройках карусели:

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

Ответ 5

Вы также можете использовать 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);
};

Ответ 6

Ваш код работает нормально.

Никакой проблемы в коде, который вы показали.

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

Ответ 7

Почему бы не использовать пользовательский интерфейс Angular, чтобы заставить Bootstrap и Angular играть хорошо?

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

EDIT:

Ваш код не работает, потому что на навигационных ссылках у вас есть атрибуты href, установленные в #Carousel. Поэтому, когда вы нажимаете на эти ссылки Angular, маршрутизатор будет пытаться изменить представление и отобразить тот, который называется Carousel, который не определен в вашем маршруте $routeProvider, поэтому пустая страница.

Поскольку вы используете Bootstrap.js, кажется, что вам абсолютно нужны эти атрибуты href, поэтому, возможно, вы избавитесь от маршрутизатора. Или попробуйте Angular UI;)

Ответ 8

Это работает, не изменяя исходный пример начальной загрузки

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

Ответ 9

Вы можете сделать функцию и поместить ее в предыдущую/следующую стрелку в html.

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