我的目标:我想阻止旋转木马下载图片,直到点击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>
答案 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>