我有两个垂直对齐的离子滑动盒。在第二个幻灯片框中,我有几个按钮。当我点击那些按钮时,我正在呈现一个模态视图,我在点击模态显示视图中的另一个按钮时忽略了模态视图。
问题:关闭模态视图后,第二个离子幻灯片框未显示。只显示第一个幻灯片框。
这是我的HTML:
<ion-view view-title='Home'>
<ion-content>
<div>
<ion-slide-box class="twitter" show-pager="false">
<ion-slide>
<div class="div_twitter">
<img class="twitterImg" src="img/ben.png" width="50" height="50" />
</div>
</ion-slide>
<ion-slide>
<div class="div_twitter">
<img src="img/ben.png" width="50" height="50" />
</div>
</ion-slide>
</ion-slide-box>
</div>
<div>
<ion-slide-box class="belowTwitter" show-pager="false">
<ion-slide>
<div>
<div id="logoDisplay">
<img src="" />
</div>
<p id="infoText" style="text-align: center">Welcome to Test App,</p>
</div>
</ion-slide>
<ion-slide>
<p id="infoText" style="text-align: center">See our help area for more information</p>
<div align="center">
<button class="button button-positive" ng-click="showHelp()">
View Help
</button>
</div>
</ion-slide>
<ion-slide>
<div align="center">
<button class="button button-positive" ng-click="showapp()">Get Started</button>
</div>
</div>
</ion-slide>
</ion-slide-box>
</div>
</ion-content>
</ion-view>
和 CSS :
/*slide box*/
.twitter {
margin-top:-40px;
overflow: visible;
display: table; /* makes the slider have a height */
}
以及提供模态视图的代码:
$scope.showHelp=function(){
$ionicModal.fromTemplateUrl('help.html', function($ionicModal) {
$scope.modal = $ionicModal;
$scope.modal.show();
}, {
// Use our scope for the scope of the modal to keep it simple
scope: $scope,
animation: 'slide-in-up'
});
在提供模态视图之前,2个幻灯片框显示为正常:
取消Modal视图后,仅显示第一个幻灯片框: