使用 ngIf 切换子标题时如何调整 Ionic 主要内容的大小
How to resize Ionic main contents when toggling a subheader using ngIf
我正在尝试使用 ngIf
切换 Ionic sub header on/off,如下所示
<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。子菜单 shows/hide 很好,但是切换子 header 时主要内容不会调整大小。
我试过在后面的代码中添加一个adding/removing class has-subheader
,然后调用$scope.apply()
,但是"refresh"似乎没有什么主要的内容高度。如果我最初有 class="has-subheader"
,那么 subheader 总是有一个 space,无论是否可见,如果我没有,那么 subheader 覆盖主要内容的顶部。
我在展示 Ionic headers 时遇到了麻烦,所以在这个阶段还没有制作(希望这个描述足够了)
此外,我在 Ionic splitview...
中使用它
<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>
有人知道解决这个问题的方法吗?
提前感谢您的任何建议!
在 add/remove 子标题时调用 $ionicScrollDelegate.resize()
。
这可能是一个方向..!
<div ng-class="{' bar bar-subheader':(showSubheader)}" >
<h2 class="title">Sub Header</h2>
</div>
类似地,在 <ion-content>
中尝试 has-subheader
class
我正在尝试使用 ngIf
切换 Ionic sub header on/off,如下所示
<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。子菜单 shows/hide 很好,但是切换子 header 时主要内容不会调整大小。
我试过在后面的代码中添加一个adding/removing class has-subheader
,然后调用$scope.apply()
,但是"refresh"似乎没有什么主要的内容高度。如果我最初有 class="has-subheader"
,那么 subheader 总是有一个 space,无论是否可见,如果我没有,那么 subheader 覆盖主要内容的顶部。
我在展示 Ionic headers 时遇到了麻烦,所以在这个阶段还没有制作(希望这个描述足够了)
此外,我在 Ionic splitview...
中使用它<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>
有人知道解决这个问题的方法吗?
提前感谢您的任何建议!
在 add/remove 子标题时调用 $ionicScrollDelegate.resize()
。
这可能是一个方向..!
<div ng-class="{' bar bar-subheader':(showSubheader)}" >
<h2 class="title">Sub Header</h2>
</div>
类似地,在 <ion-content>
has-subheader
class