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

Meint
  • 21
  • 4

3 Answers3

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

Community
  • 1
  • 1
Meint
  • 21
  • 4
0

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

<ng-include src="partials/header-list.html" class="">...
Christopher Haught
  • 21
  • 3
  • yes, that's required, see [angularjs documentation](https://docs.angularjs.org/api/ng/directive/ngInclude) and this [stackoverflow post](http://stackoverflow.com/questions/13943471/angularjs-ng-include) – Meint Dec 15 '14 at 16:24
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>
nicolov
  • 131
  • 1
  • 5