ngb - El carrusel Bootstrap no funciona con angularjs

ngb-tabset

Question

Quiero usar el carrusel de arranque junto con js angulares para mostrar imágenes en el contenido del carrusel. Pero cuando los enlaces de navegación hacen clic, muestra una página en blanco.

Mi código de muestra es el siguiente. ( Nota : Este código funciona bien solo con Bootstrap 3.1.0 pero no junto con 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>

Answer 1

¿Por qué no usar la interfaz de usuario angular para que Bootstrap y Angular jueguen bien?

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

EDITAR:

Su código no funciona porque en los enlaces de navegación tiene atributos href establecidos en #Carousel. Por lo tanto, cuando haga clic en esos enlaces, el enrutador angular intentará cambiar de vista y visualizar el llamado Carrusel que no está definido en su $ routeProvider, por lo tanto, la página en blanco.

Como está utilizando Bootstrap.js, parece que necesita estos atributos href para poder deshacerse del enrutador. O pruebe la interfaz de usuario angular;)

Answer 2

Como se mencionó, el problema es que AngularJS y ngRoute interceptan los clics de un enlace. Tuve este problema, pero no quería usar Bootstrap de interfaz de usuario angular (como se describe en otras respuestas).

Entonces, cambié los elementos .carousel-control de los enlaces ( a ) a los tramos.

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

Luego, agregué un controlador de eventos de la siguiente manera ...

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

Espero que esto ayude...

Answer 3

Establezca target="_self" en sus controles de carrusel:

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

Answer 4

Esto funciona, sin modificar el ejemplo original de arranque

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

Answer 5

Puede hacer que funcione y colocarlo en la flecha anterior / siguiente en html.

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

Answer 6

Si no necesita vincular su carrusel, puede resolverlo agregando un elemento de nivel superior con la directiva ng-non-bindable :

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

Answer 7

Sobre la base de lo que dice el rbanning, en lugar de agregar el controlador de eventos puede simplemente, después de reemplazar las etiquetas de anclaje con etiquetas span, reemplazar el atributo href con un atributo "data-target" y bootstrap se ocupa del resto.

Al igual que:

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

Answer 8

También puede usar ng-clic en ambos controles.

Estoy usando esto en mi sitio (nota href="" está en blanco ahora)

En vista:

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

En el controlador:

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

Answer 9

Tu código funciona bien

No hay ningún problema en el código que mostró.

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