1

I'm running into an issue with using ng-include in ion-nav-bar. The ng-include(d) ion-nav-bar code isn't displaying (it is included though).

The code is as follows:

<ion-view title="test">
    <ng-include src="'partials/header-list.html'"></ng-include>
    <ion-content padding="false">Test</ion-content>
    <ng-include src="'partials/footer-badges.html'"></ng-include>
</ion-view>

The contents of partials/header-list.html is:

<ion-nav-bar class="bar-positive">
    <ion-nav-back-button class="button button-clear ion-chevron-left"> Back </ion-nav-back-button>
</ion-nav-bar>
<ion-nav-buttons side="right"><a href="#/app/home" class="button button-clear"> Home </a></ion-nav-buttons>

This is rendered into:

<ng-include src="'partials/header-list.html'" class=""><ion-nav-bar class="bar-positive bar bar-header nav-bar nav-title-slide-ios disable-user-behavior  invisible">
<ion-nav-back-button class="button button-clear back-button ng-hide"> Back </ion-nav-back-button>
<div class="buttons left-buttons"> </div><h1 ng-bind-html="title" class="title ng-binding"></h1>
<div class="buttons right-buttons"> <span class=""><a href="#/app/home" class="button button-clear"> Home </a></span></div></ion-nav-bar>
<ion-nav-buttons side="right" style="display: none;"></ion-nav-buttons></ng-include>

I can see that ion-nav-bar is set to class=invisible and ion-navs-buttons is set to display:none.

Why is this happening and what can I do to get the nav bar to display when used in ng-include?

Thanks Meint

3 Answers 3

1

As requested by ArtOfCode please find the full code below. The approach I've taken also correlates with the advice of the Ionic team given in the "Navigating Ionic's Headers" formula.

I'm using <ion-nav-bar> for the generic navigation and apply exceptions to that navigation via a specific <ion-header-bar>. An example of this approach:

<ion-view hide-nav-bar="true">

  <ion-header-bar align-title="center" class="bar-dark">
    <div class="buttons">
      <a class="button button-icon icon ion-chevron-left" ng-href="#/app/group"> Back</a>
    </div>
    <h1 class="title"></h1>
    <div class="buttons">
      <a class="button button-icon icon ionic-plus" ng-href="#/app/member-create/{{groupid}}"></a>
      <a class="button button-icon icon ionic-minus" ng-href="#/app/member-delete"></a>
    </div>
  </ion-header-bar>

  <ion-content class="has-header">
  </ion-content>

</ion-view>

As an additional remark I would like to add that I have found that angular directives provide a much better approach for reusability than using ng-include as originally envisioned by myself. All part of the leaning experience :-)

0

I dont think you want the inner single quotes in your src attribute

<ng-include src="partials/header-list.html" class="">...
1
0

I've stumbled upon the same problem. Beta14 should somehow alleviate the issue with new ways to override the navbar. Until then, I'm using:

<ion-view hide-nav-bar="true">

and using an <ion-header-bar> instead, which can be included without problems. Note it should be used for non-standard views.

An example:

<ion-view hide-nav-bar="true>
    <ion-header-bar class="bar-positive">
        <h1 class='title'>
            Hello!
        </h1>
   </ion-header-bar>

   <ion-content class="has-header">
        Content
   </ion-content>
</ion-view>
1
  • You might want to post the full set of code you've used... where does the <ion-header-bar> go?
    – ArtOfCode
    Mar 5, 2015 at 15:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.