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>

____________ ____________ ____________ ____________

使用 ng-show加载所有内容并在 ng-show="false" 时将它们隐藏。

（在萤火虫网标签看到它）

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

__________________________________

当我在父级中使用 ng-show 时，carousel.html有效。

<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 回答