如何在Angular JS中为旋转木马调用JavaScript函数

时间:2016-08-12 18:29:14

标签: javascript angularjs carousel

我想在下面的Angular JS控制器中调用这个JavaScript函数。轮播按钮不会像此网站http://www.bootply.com/1DtSbhZQtI中的示例那样工作。 JavaScript中的错误在哪里?谢谢。

var myCarousel = function() {

$('#myCarousel').on('slid.bs.carousel')};

myCarousel();

这是为了在我的html文件上运行缩略图轮播,这里是html的代码。

<div class="col-md-6">
    <div class="well">
        <div id="myCarousel" class="carousel slide">

            <!-- Carousel items -->
            <div class="carousel-inner">
                <div class="item active">
                    <div class="row">
                        <div class="col-sm-3"><a href="#x"><img src="images/StaticBarHeadcountHorizontal.png" alt="Image" class="img-responsive"></a>
                        </div>
                        <div class="col-sm-3"><a href="#x"><img src="images/StaticBarHeadcountVertical.png" alt="Image" class="img-responsive"></a>
                        </div>
                        <div class="col-sm-3"><a href="#x"><img src="images/StaticGroupedHeadcount.png" alt="Image" class="img-responsive"></a>
                        </div>
                        <div class="col-sm-3"><a href="#x"><img src="images/TrendBarHeadcount.png" alt="Image" class="img-responsive"></a>
                        </div>
                    </div>
                    <!--/row-->
                </div>
                <!--/item-->
                <div class="item">
                    <div class="row">
                        <div class="col-sm-3"><a href="#x" class="thumbnail"><img src="images/TrendDonutHeadcount.png" alt="Image" class="img-responsive"></a>
                        </div>
                        <div class="col-sm-3"><a href="#x" class="thumbnail"><img src="images/TrendLineHeadcount.png" alt="Image" class="img-responsive"></a>
                        </div>
                        <div class="col-sm-3"><a href="#x" class="thumbnail"><img src="images/TrendLinePercentofTotalHeadcount.png" alt="Image" class="img-responsive"></a>
                        </div>
                    </div>
                    <!--/row-->
                </div>
            </div>
            <!--/carousel-inner--> <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>

            <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
        </div>
        <!--/myCarousel-->
    </div>
    <!--/well-->
</div>

1 个答案:

答案 0 :(得分:0)

我认为这与角度无关,您只需要创建旋转木马:

$('#myCarousel').carousel();