防止ng-include加载,直到ng-if =" bool" bool设置为true;

时间:2015-02-21 12:53:32

标签: angularjs angularjs-ng-include angular-ng-if

我的目标:我想阻止旋转木马下载图片,直到点击caurosel按钮

带有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 =&#34; false&#34;

,则

使用ng-show 加载并保持隐藏状态。

(在firebug net tab中看到它)

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

1 个答案:

答案 0 :(得分: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>

Issue