‹Ion-footer-bar› директивы и атрибуты работают, когда footer-bar внутри ion-content, но

У меня есть 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 не работают, я считаю, что это потому, что они не используют одну и ту же область видимости.

Я даже попытался добавить данные, как описано в видео про яйцеголовых и в этот комментарий, но он не сработал. Я также добавил data.* ко всем существующим переменным в ОБЕИХ ion-content и ion-footer-bar such asisKeyboardOpen`, но это не устранило проблему.

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

ionic-framework ionic-view ionic
person CommonSenseCode    schedule 17.09.2015    source источник
comment
создайте демонстрацию своего минимального сценария, play.ionic.io. Потому что технически объем должен быть разделен на все представление.   -  person Mudasser Ajaz    schedule 18.09.2015

Ответы (2)


arrow_upward
1
arrow_downward

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>

и все должно работать нормально.

Вы можете проверить этот рабочий образец здесь, где я могу показать / скрыть панель нижнего колонтитула, нажав кнопку в контент.

person LeftyX    schedule 18.09.2015
comment
@ user912010: Рад, что помог. Ваше здоровье. - person LeftyX; 18.09.2015

arrow_upward
1
arrow_downward

Если вы работаете с 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>

И я имею-

введите описание изображения здесь

Надеюсь, это сработает и для вас.

person S.Yadav    schedule 20.09.2016