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属性替换为＆＃34; data-target＆＃34;属性和引导程序负责其余部分。

像这样：

<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-control元素从链接（ a 标记）更改为跨度。

<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

您也可以在两个控件上使用ng-click。

我在我的网站上使用此功能（注意href=""现在是空白的）

在视图中：

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

在控制器中：

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

Answer 6

您的代码运行正常。

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

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

Answer 7

为什么不使用Angular UI让Bootstrap和Angular很好地一起玩？

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

编辑：

您的代码无效，因为在导航链接上您有#Carousel设置的href属性。因此，当您单击这些链接时，Angular路由器将尝试更改视图并显示一个名为Carousel的路径，该路径未在$ routeProvider中定义，因此为空白页。

由于你正在使用Bootstrap.js，你似乎绝对需要这些href属性，所以可能会摆脱路由器。或者试试Angular UI;）

Answer 8

这可行，无需修改原始引导示例

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

Answer 9

您可以创建功能并将其放在html中的上一个/下一个箭头。

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

Bootstrap轮播不使用angularjs

9 个答案: