I have an app constructed with angularjs and IONIC famework. In the pages I try to insert navigation header bar through ng-directive.The template is correctly loaded (I see in the console the message: 'XHR finished loading: GET "http://localhost:45678/assets/tmpl/navigation-header.html' but the html is not displayed in the page, because the hight and width is set to '0', as if, for some reason, it isn't elaborated, or instatiated, or something similar..
Here html:
<ion-view title="LANGUAGES">
<div ng-include="'assets/tmpl/navigation-header.html'"></div>
<ion-content class="has-header">
....
and here is the included file:
<ion-nav-bar class="bar-positive nav-title-slide-ios7">
<ion-nav-back-button class="button-icon icon ion-ios7-arrow-back"></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-buttons side="right">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
As I wrote above, I can see the html produced in the inspector, but not in the resulted view, if I put the mouse over the in the consolle, Chrome says that it has height: 0 and width: 0.
Any idea or suggestion???
Thank a lot.
You need to give the url using the src
as shown below
<ion-view title="LANGUAGES">
<div ng-include src="'assets/tmpl/navigation-header.html'"></div>
<ion-content class="has-header">
As shown in this post in the ionic forum ( http://forum.ionicframework.com/t/ion-nav-bar-ng-include-not-working/13725/4 ) the best way to workaround this issue is to override the navbar with a < ion-header >, written inside the . Be sure to put hide-nav-bar="true" in the < ion-view > otherwise you will have somethimes two headers. With a < ion-header > the < ng-include > works correctly.
<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>