Bootstrap Carousel无法使用AngularJS

时间:2016-05-02 09:33:58

标签: javascript angularjs twitter-bootstrap carousel

我在我的第一个视图中应用了bootstrap轮播,这是通过路由渲染,但是一旦我按下我的轮播下一个或上一个按钮它就会路由到视图,路由或引导程序href正在拦截我尝试了所有给出的答案在stackoverflow但它不工作。 我不想申请angular-ui-bootstrap第三方。 这是我的代码。

<div class="container"  ng-controller="OrdersController">
     <!--carousel start -->
    <div id="mycarousel" class="carousel slide" data-ride="carousel">
  <!-- Menu -->
 <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>

<!-- Items -->
<div class="carousel-inner">
    <div class="carousel-item active">
        <img src="http://gallery.thesemite.com/var/albums/Nepal-2012/IMG_0848.jpg?m=1342483083" class="img-responsive"/>
    </div>
    <div class="carousel-item">
        <img src="http://upload.wikimedia.org/wikipedia/commons/2/2b/Savonlinna_hein%C3%A4kuu_2002_IMG_1635.JPG" class="img-responsive"/>
    </div>
    <div class="carousel-item">
        <img src="http://gsm2015.ru/wp-content/uploads/2013/07/IMG_2013_21.jpg" class="img-responsive"/>
    </div>
</div> 

<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
  </a>
 </div>
   <!--carousel end-->
  </div>

我尝试删除锚标记和href属性并替换为span和data-target,这是无效的我尝试了所有场景,如通过ng-click =“prevSlide()调用函数

       //this function inside the controller
    $scope.prevSlide = function() {
       $('#mycarousel').carousel('next');
    };

哪个也没有任何帮助将会感激不尽,因为尝试了很多地方写评论,但没有得到答案。

1 个答案:

答案 0 :(得分:0)

请将$更改为jQuery,如jQueryscope.prevSlide。希望它会对你有所帮助。