如何在使用ngIf切换子标题时调整Ionic主内容的大小

How to resize Ionic main contents when toggling a subheader using ngIf

本文关键字：Ionic 调整 标题 ngIf      更新时间：2023-09-26

我正试图使用ngIf来打开/关闭Ionic子标头，如下所示

<div class="bar bar-subheader" ng-if=showSubheader>
    <h2 class="title">Sub Header</h2>        
 </div>
 <ion-content class="has-subheader">
    <div data-ng-include="'app/main/main.html'"></div>
 </ion-content>

并将$scope.showSubheader设置为true/false。子菜单显示/隐藏精细，但切换子标题时不会调整主要内容的大小。

我已经尝试在代码后面添加一个添加/删除类has-subheader，并调用$scope.apply()，但似乎没有什么能"刷新"主要内容的高度。如果我最初在那里有class="has-subheader"，那么子标题总是有一个空间，无论是否可见，如果我没有它，则子标题覆盖主要内容的顶部。

我在展示Ionic标题时遇到了麻烦，所以现阶段还没有制作一个（希望这个描述就足够了）

此外，我在离子分裂视图中使用这个。。。

<ion-side-menus>
<ion-side-menu-content>
    <ion-header-bar class="bar-positive">
        <button class="button button-icon ion-navicon" ng-click="vm.toggleLeft()" ng-hide="$exposeAside.active"></button>
        <h1 style="text-align: left" class="title">Title</h1>            
    </ion-header-bar>
    <div class="bar bar-subheader" ng-if=showSubheader>
     <h2 class="title">Sub Header</h2>        
   </div>
    <ion-content id="maincontent" class="padding has-subheader">
        <div data-ng-include="'app/main/main.html'"></div>
    </ion-content>
  <ion-footer-bar align-title="left" class="bar-balanced"></ion-footer-bar>
</ion-side-menu-content>
<ion-side-menu width={{vm.menuwidth}} expose-aside-when={{vm.exposewhen}}>
    <ion-header-bar class="bar-royal">
        <h1 style="text-align: left" class="title">Options</h1>
    </ion-header-bar>
    <ion-content>
        <div data-ng-include="'app/options/options.html'"></div>
    </ion-content>
</ion-side-menu>

有人知道这方面的办法吗？

提前感谢您的任何建议！

这可能是一个方向。。！

 <div ng-class="{' bar bar-subheader':(showSubheader)}" >
    <h2 class="title">Sub Header</h2>
 </div>

类似地，在<ion-content> 中尝试has-subheader类

添加/删除子标题时调用$ionicScrollDelegate.resize()。

文档

相关文章：