it-swarm.com.de

Bootstrap-Karussell funktioniert nicht mit anglejs

Ich möchte Bootstrap-Karussell zusammen mit eckigen Js verwenden, um Bilder in Karussellinhalt anzuzeigen. Wenn jedoch die Navigationslinks angeklickt werden, wird eine leere Seite angezeigt.

Mein Codebeispiel lautet wie folgt. ( Hinweis : Dieser Code funktioniert nur mit Bootstrap 3.1.0 , aber nicht zusammen mit 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>
28
Rakesh

Aufbauend auf dem, was rbanning gesagt hat, können Sie, anstatt den Event-Handler hinzuzufügen, einfach nach Ersetzen der Ankertags durch span-Tags das Attribut href durch ein Attribut "data-target" ersetzen.

So wie:

<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

Wie bereits erwähnt, besteht das Problem darin, dass AngularJS und ngRoute die A-Link-Klicks abfangen. Ich hatte dieses Problem, wollte aber nicht Angular UI Bootstrap verwenden (wie in anderen Antworten beschrieben).

Also habe ich die .carousel-Steuerelemente von Links ( a tags) zu Spannweiten geändert.

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

Dann habe ich einen Event-Handler wie folgt hinzugefügt:.

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

Hoffe das hilft...

11
rbanning

Legen Sie target="_self" in Ihren Karussellsteuerelementen fest:

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

Wenn Sie Ihr Karussell nicht binden müssen, können Sie dies lösen, indem Sie ein Element der obersten Ebene mit der ng-non-bindable-Direktive hinzufügen:

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

Sie können auch einfach auf beide Steuerelemente klicken. 

Ich verwende dies auf meiner Website (Hinweis href="" ist jetzt leer)

Im Hinblick auf:

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

Im Controller:

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

Sie können eine Funktion erstellen und auf den vorherigen/nächsten Pfeil in HTML setzen.

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

Ihr Code funktioniert gut.

Kein Problem in dem von Ihnen gezeigten Code.

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

0
Chen-Tsu Lin

Dies funktioniert, ohne das ursprüngliche Bootstrap-Beispiel zu ändern

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

Verwenden Sie die Angular-Benutzeroberfläche, um Bootstrap und Angular dazu zu bringen, gut mitzuspielen. 

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

BEARBEITEN:

Ihr Code funktioniert nicht, da für die Navigationslinks die unter #Carousel festgelegten Attribute festgelegt wurden. Wenn Sie also auf diese Links klicken, versucht der Angular-Router, die Ansicht zu ändern und das als Karussell bezeichnete anzuzeigen, das nicht in Ihrem $ routeProvider definiert ist, daher die leere Seite.

Da Sie Bootstrap.js verwenden, scheint es, als würden Sie diese href-Attribute unbedingt benötigen, so dass Sie möglicherweise den Router loswerden. Oder geben Sie Angular UI einen Versuch;)

0
jc-tzn