我有这个ion-footer-bar
在ion-content
内工作得很好,问题是它不会粘在底部,因为页脚应该是:
<ion-footer-bar class="foot-bar" ng-hide="isKeyboardOpen">
<button class="button button-block btn-policy ion-ios-arrow-thin-right"
ng-disabled="(!medsRefundForm.firstSubform.$valid && !MedsRefund.toggleChecked)
|| (MedsRefund.toggleChecked && !medsRefundForm.secondSubform.$valid)"
ng-click="submit()"></button>
</ion-footer-bar>
所以当我把它放在离子内容之外时它会坚持到底,但现在ng指令不起作用我相信这是因为它们没有共享相同的范围。
我甚至尝试添加数据,如egghead video和this commentary中所述,但它不起作用。我还在data.*
和ion-content
isKeyboardOpen`中向所有现有变量添加了ion-footer-bar such as
,但这并没有解决问题。
<ion-footer-bar class="foot-bar" ng-hide="data.isKeyboardOpen">
<button class="button button-block btn-policy ion-ios-arrow-thin-right"
ng-disabled="(!data.medsRefundForm.firstSubform.$valid && !data.MedsRefund.toggleChecked)
|| (data.MedsRefund.toggleChecked && !data.medsRefundForm.secondSubform.$valid)"
ng-click="submit()"></button>
</ion-footer-bar>
答案 0 :(得分:1)
ion-footer-bar
必须放在内容之外
如果您正在使用<ion-nav-view>
,则必须将其放在该位置之外。
<ion-header-bar class="bar-stable">
<h1 class="title">Header</h1>
</ion-header-bar>
<ion-nav-view>
<ion-content>
Your content here
</ion-content>
</ion-nav-view>
<ion-footer-bar class="bar-assertive">
<h1 class="title">Footer</h1>
</ion-footer-bar>
您的问题似乎与您的控制器有关。
你可以做的是用你的html包裹<div>
并在那里定义一个控制器。
<div ng-controller="mainCtrl">
<ion-header-bar class="bar-stable">
<h1 class="title">Header</h1>
</ion-header-bar>
<ion-nav-view>
<ion-content>
Your content here
</ion-content>
</ion-nav-view>
<ion-footer-bar class="bar-assertive">
<h1 class="title">Footer</h1>
</ion-footer-bar>
</div>
事情应该运转得很好。
您可以查看此工作示例here,我可以在其中显示/隐藏内容栏中的按钮。
答案 1 :(得分:1)