Bootstrap 2.x旋轉木馬幻燈片和ui.bootstrap（angularjs）不能一起工作

我對web開發非常陌生，因此尋找一些幫助來了解如何解決我在Bootstrap和AngularJS。Bootstrap 2.x旋轉木馬幻燈片和ui.bootstrap（angularjs）不能一起工作

我有一個旋轉木馬幻燈片設置爲顯示低於該作品（一些免費的模板，我下載）

<section id="carouselSection" style="text-align: center"> 
<div id="myCarousel" class="carousel slide" > 
    <div class="carousel-inner"> 
     <div style="text-align:center" class="item active"> 
      <div class="wrapper"><img src="content/sarakutheme/themes/images/carousel/business_website_templates_1.jpg" alt="business webebsite template"> 
      <div class="carousel-caption"> 
       <h2>What we do?</h2> 
       <p>We specialise in web design, web development and graphic design for different Desktop, Mobiles and Tablets. We recently introduce cheapest and best mobile web design packages in our services. </p> 
       <a href="services.html" class="btn btn-large btn-success">Read more</a> 
      </div> 
      </div> 
     </div> 
     <div style="text-align:center" class="item"> 
      <div class="wrapper"><img src="content/sarakutheme/themes/images/carousel/business_website_templates_2.jpg" alt="business themes"> 
      <div class="carousel-caption"> 
       <h2>Who we are?</h2> 
       <p>We specialise in web design, web development and graphic design for different Desktop, Mobiles and Tablets. We recently introduce cheapest and best mobile web design packages in our services. </p> 
       <a href="about_us.html" class="btn btn-large btn-success">Read more</a> 
      </div> 
      </div> 
     </div> 
     <div style="text-align:center" class="item"> 
      <div class="wrapper"><img src="content/sarakutheme/themes/images/carousel/business_website_templates_3.jpg" alt="business themes"> 
      <div class="carousel-caption"> 
       <h2>What we have done?</h2> 
       <p>We specialise in web design, web development and graphic design for different Desktop, Mobiles and Tablets. We recently introduce cheapest and best mobile web design packages in our services. </p> 
       <a href="portfolio.html" class="btn btn-large btn-success">Our Portfolio</a> 
      </div> 
      </div> 
     </div> 
     <div style="text-align:center" class="item"> 
      <div class="wrapper"><img src="content/sarakutheme/themes/images/carousel/business_website_templates_4.jpg" alt="business themes"> 
      <div class="carousel-caption"> 
       <h2>Blog</h2> 
       <p>We specialise in web design, web development and graphic design for different Desktop, Mobiles and Tablets. We recently introduce cheapest and best mobile web design packages in our services. </p> 
       <a href="blog.html" class="btn btn-large btn-success">Recent NEWS</a> 
      </div> 
      </div> 
     </div> 
     <div style="text-align:center" class="item"> 
      <div class="wrapper"><img src="content/sarakutheme/themes/images/carousel/business_website_templates_5.jpg" alt="business themes"> 
      <div class="carousel-caption"> 
       <h2>Need help?</h2> 
       <p>We specialise in web design, web development and graphic design for different Desktop, Mobiles and Tablets. We recently introduce cheapest and best mobile web design packages in our services. </p> 
       <a href="contact.html" class="btn btn-large btn-success">Contact us</a> 
      </div> 
      </div> 
     </div> 
    </div> 
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
    <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a> 
</div>

只要我的模塊定義爲

var myApp = angular.module('myApp', []);

但當我將「ui.bootstrap」添加到模塊列表中時，旋轉木馬上的按鈕就會混亂起來，因爲它會增加一些angularjs類對此。

var myApp = angular.module('myApp', ["ui.bootstrap"]);

看起來像在ui.bootstrap也有被搞亂了我的類下一個和前一個轉盤。我想知道如果有人有解決此問題的解決方法。

更新與Plunker鏈接和一些額外的言論

鏈接：http://plnkr.co/edit/HGana8kS9wyjUJcy4bQ9如果你在通知書

，我已經包含app.js，其中問題可以重現。只是刪除「ui.bootstrap」使代碼工作，我能想到的原因是，在鉻它表明其將跨越一個div我（<）和（>）

<div ng-class="{ 
'active': leaving || (active &amp;&amp; !entering), 
'prev': (next || active) &amp;&amp; direction=='prev', 
'next': (next || active) &amp;&amp; direction=='next', 
'right': direction=='prev', 
'left': direction=='next'

}」 class="right carousel-control item" ng-transclude="" href="#myCarousel" data-slide="next"><span class="ng-scope">></span></div>

希望這有助於理解這個問題更好

問候基蘭

來源

2013-10-15 Kiran

你可以發佈一個plunkr嗎？ – lort

是的，很難說沒有最低限度的重現情況下更多.... –

我已經更新了我的文章並提供了更多信息。 – Kiran

原來的解決辦法是比我想象的簡單得多，當有一類「NG-非綁定「適用於

<a class="right carousel-control ng-non-bindable" href="#myCarousel" data-slide="next">&rsaquo;</a>

它被停止施加額外股利。它現在像一個魅力。

來源

2013-10-18 03:09:20 Kiran

Bootstrap 2.x旋轉木馬幻燈片和ui.bootstrap（angularjs）不能一起工作

回答

相關問題