<离子躯杆> ng指令和属性在footer-bar内部离子含量时起作用 [英] <ion-footer-bar> ng directives and attributes work when footer-bar inside ion-content but

问题描述

我有 ion-footer-bar 在 ion-content 内工作正常，问题是它不会粘到底部，因为页脚应该是：

I have this ion-footer-barwhich works just fine inside the ion-content, the problem is it isn't sticked to bottom as a footer should be:

<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-directives不要工作我相信这是因为他们没有共享相同的范围。

So when I put it outside of ion-content it sticks to bottom but now the ng-directives don't work I believe it's because they aren't sharing the same scope.

我甚至尝试添加数据，如 egghead视频和此评论但它没有用。我还在 ion-content 和中添加了数据。* 到所有现有的变量离子页脚栏，如 isKeyboardOpen`，但这并没有解决问题。

I even tried adding the data, like explained in egghead video and in this commentary but it didn't work. I also added data.* to all present vars in BOTH the ion-contentand the ion-footer-bar such asisKeyboardOpen`, but that didn't fixed the problem.

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

推荐答案

ion-footer-bar 必须放在内容之外。

如果您使用< ion-nav-view> ，则必须放在那之外。

ion-footer-bar must be placed outside the content.
If you're using <ion-nav-view> it has to be placed outside that.

<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并在那里定义一个控制器。

It seems that your problem is with your controller. What you can do is wrap your html with a <div> and define a controller there.

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

并且事情应该可以正常工作。

and things should work just fine.

您可以查看此工作样本此处，我可以在其中显示/隐藏页脚栏中单击内容中的按钮。

You can check this working sample here, where I can show/hide the footer bar clicking the button in the content.

这篇关于<离子躯杆> ng指令和属性在footer-bar内部离子含量时起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！