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」を削除するだけでコードが機能します。考えられる理由は、クロムで (<) と (>) に 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 に答える