Question

我是网络开发的新手，所以寻求一些帮助来了解如何解决我在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”添加到模块列表时，＆lt; ＆安培; ＆GT;旋转木马上的按钮搞砸了，因为它上面放了一些angularjs类。

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

看起来像在ui.bootstrap中，还有一个旋转木马会让我的课程在下一次和上一次搞乱。我想知道是否有人解决了这个问题。

更新了Plunker Link 以及其他一些备注

链接：http://plnkr.co/edit/HGana8kS9wyjUJcy4bQ9

如果您注意到，我已将app.js包含在可以复制该问题的地方。只是删除“ui.bootstrap”使代码工作，我能想到的原因是在Chrome中它表明它在我的（＆lt;）和（＆gt;）

中添加了一个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>

希望这有助于更好地理解问题

此致基兰

Answer 1

事实证明，当有一个“ ng-non-bindable ”类应用于

时，解决方案比我想象的要简单得多

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

它阻止了额外的div被应用。它现在就像一个魅力。

Bootstrap 2.x carousel slide和ui.bootstrap（angularjs）不能一起工作

1 个答案: