Bootstrap轮播不使用angularjs

Question

我想使用bootstrap轮播和角度js来显示旋转木马内容中的图像.但是,当点击导航链接时,它会显示空白页面.

我的代码示例如下.(注意:此代码仅适用于Bootstrap 3.1.0,但不适用于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

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

Answer 2

如上所述,问题在于AngularJS和ngRoute拦截了a-link点击.我有这个问题,但不想使用Angular UI Bootstrap(如其他答案中所述).

所以,我从链接(改变.carousel控制元件一个标签)到跨.

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

希望这可以帮助...

Answer 3

设置target="_self"在您的轮播控件中:

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

Answer 4

如果您不需要绑定轮播,可以通过添加带有ng-non-bindable指令的顶级元素来解决此问题 :

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

Answer 5

你的代码工作正常。

您显示的代码没有任何问题。

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