Bootstrap carrousel de ne pas travailler avec angularjs
Je veux utiliser bootstrap carrousel avec angular js pour afficher des images dans le carrousel de contenu.
Mais, lors de la navigation, les liens cliqués, il affiche une page blanche.
Mon exemple de code est comme suit. (Note : Ce code fonctionne bien qu'avec les 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>
- avez-vous pensé à inclure jquery avant bootstrap.js?
- Oui. J'ai ajouté avant bootstrap.js.
- pourriez-vous ajouter un jsfiddle ou plnkr faire la démonstration de ce problème?
- Lien ci-dessous est mon démo. plnkr.co/modifier/IVw6tSxi0VjhT2ppnaDZ?p=preview Source : j'ai utilisé le code de démonstration à partir du lien scotch.io/tutoriels/javascript/... & modifié
- ils sont vraiment beaucoup demander, je pense que, quand vous avez à sauter à travers des cerceaux comme cela vient de l'utilisation de Bootstrap composant qui FONCTIONNE, tout SIMPLEMENT partout ailleurs.
Vous devez vous connecter pour publier un commentaire.
S'appuyant sur ce qui rbanning dit, au lieu d'ajouter le gestionnaire d'événements, vous pouvez simplement, après le remplacement de l'ancrage des étiquettes avec des balises span, remplacer l'attribut "href" avec un "data-target" attribut et bootstrap prend en charge le reste.
Comme suit:
Comme mentionné précédemment, le problème est avec AngularJS et ngRoute l'interception de la liaison clics. J'ai eu ce problème, mais ne voulez pas utiliser Angulaire UI Bootstrap (comme décrit dans les autres réponses).
Ainsi, j'ai changé la .carrousel-les éléments de contrôle à partir de liens (un tags) pour les travées.
Ensuite, j'ai ajouté un gestionnaire d'événement comme suit...
Espère que cela aide...
Ensemble
target="_self"
dans votre carrousel contrôles: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
ng-non-bindable
directive:Vous pouvez aussi simplement utiliser ng-cliquez sur les deux boutons de contrôle.
J'utilise sur mon site (note
href=""
est vide maintenant)En vue:
Dans le contrôleur:
Votre code fonctionne très bien.
Aucun problème dans le code vous a montré.
http://plnkr.co/edit/1vq7DUXegQdBq3jvj7Zy?p=preview
Pourquoi ne pas utiliser Angulaire de l'INTERFACE utilisateur pour obtenir Bootstrap et Angulaire à jouer dans le bien ?
http://angular-ui.github.io/bootstrap/#/carousel
EDIT:
Votre code ne fonctionne pas car sur les liens de navigation que vous avez des attributs href fixé à #Carrousel. Ainsi, lorsque vous cliquez sur ces liens Angulaire routeur va essayer de changer de vue et d'afficher un Carrousel qui n'est pas défini dans votre $routeProvider d'où la page blanche.
Depuis que vous utilisez Bootstrap.js il semble que vous avez absolument besoin de ces attributs href alors peut-être se débarrasser du routeur. Ou essayer Angulaire de l'INTERFACE utilisateur 😉
<accordion>
élément sur votre contact, je pensais que tu voulais un carrousel?<carousel>
dans la page à propos par souci d'exhaustivité (voir plunker), pas plus de questions?Cela fonctionne, sans modifier l'original bootstrap exemple
Vous pouvez faire fonctionner et de les placer sur prev/next flèche en html.