<ion-footer-bar> ng 指令和属性在 ion-content 中的 footer-bar 时有效，但

Question

我有这个 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>

因此，当我将它放在 ion-content 之外时，它会粘在底部，但现在 ng 指令不起作用，我相信这是因为它们不共享相同的范围。

我什至尝试添加数据，如 egghead video and in 中所述，但没有成功。我还在 ion-content 和 ion-footer-bar such asisKeyboardOpen` 中的所有现有变量中添加了 data.*，但这并没有解决问题。

<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>

Answer 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>

看来你的问题出在你的控制器上。你可以做的是用 <div> 包装你的 html 并在那里定义一个控制器。

<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，我可以在其中 show/hide 单击内容中的按钮的页脚栏。

Answer 2

如果您在 ionic-2 上工作，那么上面的代码可能不起作用，因为它不适用于我的情况。

看看我是怎么做到的-

<ion-footer class="bar-stable some-class">
  <center class="some-class">
  <img (click)="scrollTo()" src="img/iamge.png" width="32" height="32">
  </center>
</ion-footer>

我还有-

希望它对你也有用。

<ion-footer-bar> ng 指令和属性在 ion-content 中的 footer-bar 时有效，但

<ion-footer-bar> ng directives and attributes work when footer-bar inside ion-content but

ionic-framework

ionic

ionic-view