在模态视图被解除后,离子幻灯片盒不显示

时间:2016-02-16 00:20:08

标签: javascript android html ionic-framework ion-slide-box

我有两个垂直对齐的离子滑动盒。在第二个幻灯片框中,我有几个按钮。当我点击那些按钮时,我正在呈现一个模态视图,我在点击模态显示视图中的另一个按钮时忽略了模态视图。

问题:关闭模态视图后,第二个离子幻灯片框未显示。只显示第一个幻灯片框。

这是我的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个幻灯片框显示为正常:

enter image description here

取消Modal视图后,仅显示第一个幻灯片框:

enter image description here

0 个答案:

没有答案