Ion-nav-bar + ng-include not working

ionic-v1
1

Hi there,
I’m running into an issue with using ng-include in ion-nav-bar. The ng-include(d) ion-nav-bar isn’t showing…

The code is as follows:

<ion-view title="test">
  <ng-include src="'partials/header-list.html'"></ng-include>
  <ion-content padding="false">
  </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"><i class="ion-chevron-left"></i> List</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"><i class="ion-chevron-left"></i> Lijst</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 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

2 Likes
2

I have the exact same problem. Please can someone give a solution for this.

3

Interestingly this behaviour doesn’t change when I’m using a directive. I have made a codepen here:

See the Pen ion-nav-bar + directive by M.E. Post (@postme) on CodePen.

The directive approach works fine for any other element but not for the ion-nav-bar. Anybody able to shed some light on this, is this a timing issue?

Kind regards
Meint

4

Hi,

Any news/update on this issue ?
I have the same issue … :confused:

5

Hi eckarath

As far as I now know you’re not supposed to change the nav-bar in the way I originally thought. Its best to keep the nav-bar generic and use a header-bar if you want to deviate from the standard navigation. This header bar can be included or made into a directive (better) if you want to reuse this. Example:

<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/home"> Back</a>
        </div>
        <h1 class="title"></h1>
        <div class="buttons">
            <a class="button button-icon icon ion-plus" ng-href="#/app/something"></a>
            <a class="button button-icon icon ion-minus" ng-href="#/app/something else"></a>
        </div>
    </ion-header-bar>
    
    <ion-content class="has-header">
    <p>some content</p>
    </ion-content>
 
</ion-view>

Make sure you use hide-nav-bar=“true” in ion-view as seen in the example otherwise you end up with two nav-bars. Also use has-header class in ion-content as seen in the example.

In the end this did what I wanted and it is in line with Ionic practice. Hope this helps.

1 Like
6

What worked for me was to ONLY override the nav-buttons within a view (even just the nav buttons on one side - left or right), like this:

<ion-view view-title="Main">
  <ion-nav-buttons side="right">
    <button class="button button-icon button-clear ion-ios-gear-outline" ng-click="changeSettings()">
    </button>
  </ion-nav-buttons>

  <ion-content>
...
</ion-nav-view>

This worked perfectly, however it stops working when you try to put it in an ng-include or in a directive. So, I end up copying/pasting the piece of code to 3 different templates (because I have a screen with 3 tabs and I want to have these nav buttons regardless which tab I click). Yes that’s ugly but it works.

When I tried the “ion-header-bar”, it did NOT work for me, for my “tabbed” page (ion-tabs). What happened was it was then putting the header bar UNDER the tabs.

Probably I’m doing something wrong but i didn’t bother exploring further, I sticked with copy-and-paste, ugky but the quickest solution.