引导转盘不angularjs工作 [英] Bootstrap carousel not working with angularjs

问题描述

我要沿着使用引导转盘具有角JS以显示旋转木马的图片。
但是，当导航链接点击后，会显示空白页。

我的code示例如下。 （注意：这code只能用行之有效的引导3.1.0 而不是沿 AngularJS 1.2.13 ）

 ＆LT; D​​IV ID =旋转木马类=旋转木马幻灯片＆GT;
    ＆LT; OL类=旋转木马的指标＆GT;
        ＆LT;李的数据目标=旋转木马数据滑动至=0级=主动＆GT;＆LT; /李＆GT;
        ＆LT;李的数据目标=旋转木马数据滑动至=1＆GT;＆LT; /李＆GT;
        ＆LT;李的数据目标=旋转木马数据滑动至=2＆GT;＆LT; /李＆GT;
    ＆LT; / OL＆GT;
    ＆LT; D​​IV CLASS =旋转木马-内＆GT;
        ＆LT; D​​IV CLASS =项目活动＆GT;
            ＆LT; IMG SRC =图像/ c.png级=IMG响应＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; D​​IV CLASS =项＆GT;
            ＆LT; IMG SRC =图像/ b.png级=IMG响应＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; D​​IV CLASS =项＆GT;
            ＆LT; IMG SRC =图像/ a.png级=IMG响应＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
    ＆LT;一类=左旋转木马控制的href =＃旋转木马数据滑=preV＆GT;
        ＆LT;跨度类=glyphicon glyphicon雪佛龙左＆GT;＆LT; / SPAN＆GT;
    ＆所述; / A＆GT;
    ＆LT;一类=右旋转木马控制的href =＃旋转木马数据滑=下一步＆GT;
       ＆LT;跨度类=glyphicon glyphicon  - 雪佛龙权＆GT;＆LT; / SPAN＆GT;
    ＆所述; / A＆GT;
＆LT; / DIV＆GT;
 

解决方案

这是什么rbanning楼说的，而不是添加事件处理程序，你可以，用span标签更换锚标记后，用数据替换href属性-target属性和引导取剩下的事情。

像这样：

 ＆LT; D​​IV ID =旋转木马类=旋转木马幻灯片＆GT;
＆LT; OL类=旋转木马的指标＆GT;
    ＆LT;李的数据目标=旋转木马数据滑动至=0级=主动＆GT;＆LT; /李＆GT;
    ＆LT;李的数据目标=旋转木马数据滑动至=1＆GT;＆LT; /李＆GT;
    ＆LT;李的数据目标=旋转木马数据滑动至=2＆GT;＆LT; /李＆GT;
＆LT; / OL＆GT;
＆LT; D​​IV CLASS =旋转木马-内＆GT;
    ＆LT; D​​IV CLASS =项目活动＆GT;
        ＆LT; IMG SRC =图像/ c.png级=IMG响应＆GT;
    ＆LT; / DIV＆GT;
    ＆LT; D​​IV CLASS =项＆GT;
        ＆LT; IMG SRC =图像/ b.png级=IMG响应＆GT;
    ＆LT; / DIV＆GT;
    ＆LT; D​​IV CLASS =项＆GT;
        ＆LT; IMG SRC =图像/ a.png级=IMG响应＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT;跨度类=左旋转木马控制数据目标=＃旋转木马数据滑=preV＆GT;
    ＆LT;跨度类=glyphicon glyphicon雪佛龙左＆GT;＆LT; / SPAN＆GT;
＆LT; / SPAN＆GT;
＆LT;跨度类=右旋转木马控制数据目标=＃旋转木马数据滑=下一步＆GT;
   ＆LT;跨度类=glyphicon glyphicon  - 雪佛龙权＆GT;＆LT; / SPAN＆GT;
＆LT; / SPAN＆GT;
＆LT; / DIV＆GT;
 

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>

这篇关于引导转盘不angularjs工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！