0

私の目的：カルーセルボタンがクリックされるまで、カルーセルのダウンロード画像を防ぎたい

ng-if 画像を含むバージョンがカルーセルに読み込まれません。 

  <button ng-click=" visSlide=false" > thumbnails </button >   
  <button ng-click=" visSlide=true"  > carousel</button >

  <div ng-if="!visSlide" ng-include src="'_thumbnails.html'"> </div>

  <div ng-if="visSlide" > 
      <div ng-include src="'_carousel.html'"> </div>
  </div>

</div>

____________ ____________ ____________ ____________

with ng-showはすべてをロードし、ng-show="false" の場合は非表示のままにします。

（firebugネットタブで見た）

<div ng-show="!visSlide" ng-include src="'_thumbnails.html'"> </div>
<div ng-show="visSlide" ng-include src="'_carousel.html'"> </div>

__________________________________

carousel.html は、親で ng-show を使用すると機能します。

<div id="myCarousel" class="carousel slide" data-interval="5000"  >
    <!--slides bootsrap carousel-->
    <div class="carousel-inner" >
        <div ng-repeat="item in imglinks"  class="item {{ $index==0 ? '  active':''}}" >  
            <img ng-src="{{ img_pre + item.img_org }}" style="margin:0  auto; max-height:500px" /> 
        </div>
    </div>
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li ng-repeat="item in imglinks" data-target="#myCarousel" data-slide-to="{{$index}}" 
        class="{{ $index==0 ? 'active' : '' }}" ></li> 
    </ol>
    <!-- Controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span> </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span> </a>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        $('.carousel').carousel();
    });
</script>
4

1 に答える 1

0

よくわかりませんが、同じ要素に ng-if と ng-include の両方を配置することに問題があります。

だから、これを変更してください

<div ng-if="!visSlide" ng-include src="'_thumbnails.html'"> </div>

に

<div ng-if="!visSlide" > 
   <div ng-include src="'_thumbnails.html'">

    </div>
</div>

問題

于 2015-02-21T12:59:54.120 に答える