Bootstrap 轮播无法与 angularjs 一起使用 [英] Bootstrap carousel not working with angularjs

查看：29
本文介绍了Bootstrap 轮播无法与 angularjs 一起使用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想使用 bootstrap carousel 和 angular js 在 carousel 内容中显示图像.但是，当点击导航链接时，它显示空白页.

我的代码示例如下.(注意:此代码仅适用于 Bootstrap 3.1.0，但不适用于 AngularJS 1.2.13)

<div class="item"><img src="images/b.png" class="img-responsive">

<div class="item"><img src="images/a.png" class="img-responsive">

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

解决方案

建立在 rbanning 所说的基础上，而不是添加事件处理程序，您可以在用 span 标记替换锚标记后，将 href 属性替换为 "data-target" 属性，引导程序负责其余的工作.

像这样:

<div class="item"><img src="images/b.png" class="img-responsive">

<div class="item"><img src="images/a.png" class="img-responsive">

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

I want to use bootstrap carousel along with angular js to display images in carousel content. But, when the navigation links clicked, it displays blank page.

My code sample is as follows. (Note : This code works well only with Bootstrap 3.1.0 but not along with 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>

解决方案

Building on what rbanning said, instead of adding the event handler you can just, after replacing the anchor tags with span tags, replace the href attribute with a "data-target" attribute and bootstrap takes care of the rest.

Like so:

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

这篇关于Bootstrap 轮播无法与 angularjs 一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆