2016-05-02 8 views
1

私の最初のビューではルーティングを通してレンダリングされていますが、私のカルーセルに次のボタンまたはprevボタンを押すと、ビュー、ルーティング、ブートストラップhrefがインターセプトされます私はstackoverflowで与えているすべての答えを試みたが、それは動作していません。 私はangle-ui-bootstrapサードパーティを適用したくありません。 ここに私のコードです。Bootstrap CarouselがAngularJSと連携していません

<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属性を削除し、私はNGクリック=「prevSlide()」

で関数を呼び出すようなすべてのシナリオを試した作業されていないスパンとデータターゲットに置き換えてみました
 //this function inside the controller 
    $scope.prevSlide = function() { 
     $('#mycarousel').carousel('next'); 
    }; 

また、何の助けにもなりませんでしたが、どこにでもコメントを書いてみましたが、答えは得られなかったので、感謝しています。

+0

Angular UI Bootstrapを使用しない理由は何ですか?これは、ブートストラップ(Bootstrap)の人たちがAngularで作業するためのコンポーネントです。 (また、ブートストラップはAngularによって実際に作られていないコンポーネントと同様にサードパーティのコンポーネントです) – Shaggy13spe

答えて

0

jQueryscope.prevSlideのような$ jQueryに変更してください。それがあなたを助けることを願っています。

+0

は機能しません。 :( – ashishSober

関連する問題