web-dev-qa-db-fra.com

Le carrousel Bootstrap ne fonctionne pas avec angularjs

Je veux utiliser le carrousel bootstrap avec js angulaire pour afficher des images dans le contenu du carrousel . Mais, lorsque les liens de navigation ont été cliqués, la page est vide.

Mon exemple de code est comme suit. ( Remarque : Ce code ne fonctionne bien qu'avec Bootstrap 3.1.0 mais pas avec 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>
angularjstwitter-bootstrapcarousel
28
Rakesh

En se basant sur ce que rbanning a dit, au lieu d’ajouter le gestionnaire d’événements, vous pouvez simplement, après avoir remplacé les balises ancres par des balises span, remplacer l’attribut href par un attribut "data-target" et bootstrap se charge du reste.

Ainsi:

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

Comme mentionné, le problème concerne AngularJS et ngRoute qui interceptent les clics sur a-link. J'ai eu ce problème, mais je ne voulais pas utiliser l'interface utilisateur angulaire Bootstrap (comme décrit dans d'autres réponses).

Ainsi, j'ai changé les éléments de contrôle .carousel de liens ( a tags) en étendues.

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

Ensuite, j'ai ajouté un gestionnaire d'événements comme suit ...

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

J'espère que cela t'aides...

11
rbanning

Définissez target="_self" dans vos commandes du carrousel:

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

Si vous n'avez pas besoin de lier votre carrousel, vous pouvez résoudre ce problème en ajoutant un élément de niveau supérieur avec la directive ng-non-bindable:

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

Vous pouvez également simplement utiliser ng-click sur les deux contrôles. 

J'utilise ceci sur mon site (note href="" est vide maintenant)

En vue:

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

Dans le contrôleur:

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

Vous pouvez créer une fonction et la placer sur la flèche précédente/suivante en HTML.

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

Votre code fonctionne bien.

Aucun problème dans le code que vous avez montré.

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

0
Chen-Tsu Lin

Cela fonctionne, sans modifier l'exemple de bootstrap d'origine

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

Pourquoi ne pas utiliser l'interface utilisateur angulaire pour obtenir Bootstrap et Angular pour bien jouer? 

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

MODIFIER:

Votre code ne fonctionne pas car sur les liens de navigation, les attributs href sont définis sur #Carousel. Ainsi, lorsque vous cliquez sur ces liens, le routeur angulaire essaie de changer de vue et d’afficher celui appelé Carrousel qui n’est pas défini dans votre $ routeProvider, d'où la page blanche.

Puisque vous utilisez Bootstrap.js, il semble que vous ayez absolument besoin de ces attributs href, alors peut-être débarrassez-vous du routeur. Ou essayez l’UI angulaire;)

0
jc-tzn