Is this plugin work with ion-header-bar?

[ajenkul]

I've implemented scroll-sista plugin to my project. However, it doesn't works with ion-header-bar? Here my code:

<ion-view view-title="Kinh Thánh" hide-nav-bar="true">
  <ion-header-bar align-title="center" class="bar-calm bar-header">
    <button class="button button-clear ion-chevron-left vb-chapter-button" style="border-color: #fff"
            ng-click="navigateChapter(-1);"></button>
    <div class="title">
      <div class="button-bar" style="margin-top: 5px;">
        <a class="button"
           ng-click="openBookSelect(0)"
           on-swipe-down="openQuickBook($event)"
           on-hold="openQuickBook($event)"
           style="border-color: #fff; width: auto;">
          {{data.currentBook.Text}}
        </a>
        <a class="button"
           ng-click="openBookSelect(1)"
           on-hold="openQuickChapter($event)"
           on-swipe-down="openQuickChapter($event)"
           style="border-color: #fff; width: auto;">
          {{data.currentChapter}}{{data.currentVerse > 0 ? ':' + data.currentVerse : ''}}
        </a>
        <a class="button"
           ng-click="openVersionSelect()"
           on-hold="openQuickVersion($event)"
           on-swipe-down="openQuickVersion($event)"
           style="border-color: #fff; width: auto;">
          {{data.currentVersion}}
        </a>
      </div>
    </div>
    <button class="button button-clear ion-chevron-right vb-chapter-button" style="border-color: #fff"
            ng-click="navigateChapter(1);"></button>
  </ion-header-bar>
  <ion-content class="padding" direction="y" delegate-handle="mainContent" scroll-sista="header-tabs-subheader" >
    <dir content="data.currentText" style="margin:0; padding: 0; font-size: 13px;"
         change-font-size="data.fontSize"></dir>
  </ion-content>
</ion-view>

[djett41]

Thanks @ajenkul I have never tried the library with ion-header-bar so I wouldn't be surprised if there were a few issues. I have been pretty busy lately but I may get around to it at some point in the future! Thanks!

[ajenkul]

You're welcome, I need a lot of custom directive for my project, hope get solution soon. Many thanks for you!

[ilsaha]

@ajenkul It works if you wrap ion-header-bar with

but you need to be sure nav-bar became "cached" when state changed. Same for each state you need ion-header-bar. There's an example of my code which works.

 <div nav-bar="{{currentState === '/who' ? 'active' : 'cached'}}">
        <ion-header-bar class="has-tabs-top bar bar-header" align-title="center">
            <div class="buttons">
                <button class="back-button button-clear" ng-click="back()">
                    <i class="ion-chevron-left"></i>
                </button>
            </div>
            <h2 class="title title-center header-item">{{title}}</h2>
        </ion-header-bar>
    </div>

[charlizesmith]

@ilsaha can you elaborate. I have an ion-header and i m trying to do the same but it doesnt work