Components break ionic navigation logic.

[vacarsu]

In app.html I have the following

<ion-nav-bar  class="bar-positive">
        <ion-nav-back-button></ion-nav-back-button>

        <ion-nav-buttons side="right">
          <button class="button button-icon" menu-toggle="right">
            <i class="icon ion-android-menu"></i>
          </button>
        </ion-nav-buttons>
</ion-nav-bar>

<ion-nav-view>
</ion-nav-view>

But because the routes load a directive around each route, this causes the navigation logic for showing view-titles and the ion-nav-back-button to not work properly

example, this is what the resulting html looks like which is causing issues

<ion-nav-bar  class="bar-positive">
        <ion-nav-back-button></ion-nav-back-button>

        <ion-nav-buttons side="right">
          <button class="button button-icon" menu-toggle="right">
            <i class="icon ion-android-menu"></i>
          </button>
        </ion-nav-buttons>
</ion-nav-bar>

<ion-nav-view>
  <component-directive>
    <ion-view view-title="My Title">
        <ion-content has-header="true">
        </ion-content>
    </ion-view>
  </component-directive>
</ion-nav-view>

Is there anyway of getting the ionic navigation working properly while still using component syntax?

[pbastowski]

It would help if you could share the JS code also and perhaps a link to the repo, as I have very little experience with ionic.

However, off the top of my head, you could try using the replace option on your @Component decorator, like this:

@Component({
  selector: 'component-directive',
  replace: true
})
class ComponentDirective {
}

It replaces the Component wrapper with the actual html template code. See the replace attribute of the angular1 directive. This will reduce the number of wrapper elements and hopefully give you what you are looking for.

[pbastowski]

@vacarsu So, has my suggestion worked for you?

[pbastowski]

Closing due to lack of response. Please feel free to reopen if required.