0

我对 Web 开发真的很陌生，因此寻求一些帮助来了解如何解决我在使用 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 Link和一些附加说明

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

如果您注意到这一点，我已将 app.js 包含在可以重现该问题的位置。只需删除“ui.bootstrap”即可使代码正常工作，我能想到的原因是在 chrome 中它显示它在我的 (<) 和 (>) 中添加了一个 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">&gt;</span></div>

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

问候基兰

4

1 回答 1

0

事实证明，解决方案比我想象的要简单得多，当有一个类“ ng-non-bindable ”应用于

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

它阻止了附加 div 的应用。它现在就像一个魅力。

于 2013-10-18T03:09:20.130 回答