簡體   English   中英

Bootstrap Carousel不與AngularJS一起使用

[英]Bootstrap Carousel is not working with the AngularJS

我在我的第一個視圖中應用了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');
    };

這也沒有任何幫助將是感激,因為嘗試了很多寫評論到處但沒有得到答案。

請將$更改為jQuery,如jQueryscope.prevSlide。 希望它會對你有所幫助。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM