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"> Home </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=""> Home </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
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 :-)
I dont think you want the inner single quotes in your src attribute
<ng-include src="partials/header-list.html" class="">...
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>
Related
I am creating an app with angularjs, cordova and iconic.
I have a trash icon which should be show only when the user is at the main page.
So i will show the icon only wenn the rootScope.Trashicon is true.
It works fine in my sidemenu. But in the side-menu-content area it doesnt work. I dont know why...
<ion-side-menus ng-controller="MainController" ng-init="getListTitle()">
<ion-side-menu side = "left"> <!-- expose-aside-when DELETE IT !!!!!! -->
<header><img src="img/todo_today_logo_small.png"></header>
<div id="sideContent" class="item item-divider">ToDo Liste:
<p>
> <a menu-close href="#/todo">{{sideMenuListTitle}}</a>
</p>
<div ng-show="Trashicon">test</div>
<h3></h3>
</div>
<div>
<ul>
<li><a menu-close href="#/impressum">Impressum</a></li>
<li><a menu-close href="#/datenschutzerklaerung">Datenschutzerklärung</a></li>
</ul>
</div>
</ion-side-menu>
<ion-side-menu-content>
<ion-nav-bar class="custom-dark" align-title="center">
<ion-nav-buttons side="left">
<!-- Toggle left side menu -->
<button menu-toggle="left" class="button button-icon icon ion-navicon light"></button>
</ion-nav-buttons>
<div ng-show="Trashicon">
<ion-nav-buttons side="right">
<button ng-click="deleteProducts()" class="button button-icon ion-ios-trash-outline pull-right light"></button>
</ion-nav-buttons>
</div>
<ion-nav-title></ion-nav-title>
</ion-nav-bar>
<div ng-view="" class="container"></div>
</ion-side-menu-content>
</ion-side-menus>
This is my rootScope Variable
.controller('MainController', function ($scope, $ionicPopup, $rootScope) {
$rootScope.Trashicon = false;
The div with the trash icon is still visible.. and i dont know why... it would be great if someone has an idea for me.
It seams the element ion-nav-buttons has its own styling which overrides all elements above it.
If you move the ng-show closer the button you will have better control.
i.e instead of
<div ng-show="Trashicon">
<ion-nav-buttons side="right">
<button ng-click="deleteProducts()" class="button button-icon ion-ios-trash-outline pull-right light"></button>
</ion-nav-buttons>
</div>
do this
<div>
<ion-nav-buttons side="right">
<button ng-show="Trashicon" ng-click="deleteProducts()" class="button button-icon ion-ios-trash-outline pull-right light"></button>
</ion-nav-buttons>
</div>
If i try ng-show="1==2" it will work only in the side menu too....
and not in the side menu content area.. the div will show if ng-show="1==2"... strange
I want to have in my app the same header(with Back button and other custom buttons) on each page.
I tried to define a custom ion-nav-bar in index.html as following:
<html>
...
<body ng-app="starter">
<ion-nav-bar class="bar-stable">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button menu-toggle="right" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body> </html>
and all the other pages looks like this:
<ion-view view-title="PageN">
<ion-content>
<ion-list>
<ion-item ng-repeat="article in articles" href="#/app/articles/{{article.id}}">
{{article.title}}
</ion-item>
</ion-list>
</ion-content>
</ion-view>
After I launched the application, my custom navbar is hidden. I can see only default navbar.
How to customize the default navbar or how to replace it with a custom one?
I already tried some solutions including header but without success.
Anyone?
I have the following code for a side menu in the body of my index.html which works. But I can't figure out how to change the Page Title to display the title of the current page.
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-view class="has-header"></ion-nav-view>
<ion-header-bar class="bar-dark">
<div class="buttons">
<button class="button icon button-clear ion-navicon-round"
ng-click="toggleLeft()"></button>
</div>
<h1 class="title">Page Title</h1>
</ion-header-bar>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-list>
<ion-item href="#/dash">Dashboard</ion-item>
</ion-list>
<ion-list>
<ion-item href="#/search">Search</ion-item>
</ion-list>
</ion-side-menu>
</ion-side-menus>
NOTE: Use Shrinath's answer and place your content in a <ion-content> tag after the ion-header-bar tag to stop the content being stacked under the header.
You can use route and for every route define template having different controller.
On Template definition you can choose different Header.
<ion-header-bar class="bar bar-header bar-dark">
<h1 class="title">Heading</h1>
</ion-header-bar>
Using the ionic framework I'm trying to have an abstract view that contains a nav button, however it does not seem to work:
Index.html
<ion-nav-bar align-title="left" class="bar-stable"></ion-nav-bar>
<ion-nav-view></ion-nav-view>
Abstract view:
<script id="menu.html" type="text/ng-template">
<ion-view cache-view="false">
<ion-nav-buttons side="right">
<button class="button button-icon ion-more"></button>
</ion-nav-buttons>
<ion-nav-view></ion-nav-view>
</ion-view>
</script>
Page 1:
<script id="page1.html" type="text/ng-template">
<ion-view cache-view="false" title="Page 1">
<ion-content>
<h1>This is page 1</h1>
<a ui-sref="page2">Go to page 2</a>
</ion-content>
</ion-view>
</script>
Page 2:
<script id="page2.html" type="text/ng-template">
<ion-view cache-view="false" title="Page 2">
<ion-nav-buttons side="right">
<button class="button button-icon ion-more"></button>
</ion-nav-buttons>
<ion-content>
<h1>This is page 2</h1>
<a ui-sref="page1">Go to page 1</a>
</ion-content>
</ion-view>
</script>
Full code pen: http://codepen.io/anon/pen/XJxoLb
The page 1 view does not get the nav button, but the page 2 view does, because it includes the ion-nav-buttons directly in it's own view.
If I change the ionic version to beta 13, it does work.
Is this a bug in later versions, or do I need to do something different for this to work i latest versions (beta 14, rc 0)?
Apparently, this is by design: https://github.com/driftyco/ionic/issues/3332#issuecomment-81850467
How to remove header title in ionic? I want to remove login title inside my header.
my code
<ion-view hide-back-button="true">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
<h1 class="title"><img class="title-image" src="img/header_logo.png" /></h1>
</ion-nav-buttons>
<ion-content class="has-header">
<ion-list>
<ion-item ng-repeat="playlist in playlists" href="#/app/home/{{playlist.id}}">
{{playlist.title}}
</ion-item>
</ion-list>
</ion-content>
</ion-view>
Current issue
Add this to your view
<ion-view hide-nav-bar="true" hide-back-button="true" view-title="welcome">
How about this:
<ion-view title=''>
Put any html content inside title and it will re rendered as html.
<ion-view title='<img class="title-image" src="images/logo.png" />'>