CODEWITHSUNDEEP
htmlcssionic-framework
Wahtel
Wahtel

Reputation: 161

Header in my ionic application does not display

i'm new in ionic framework, i'm trying to display global header with back button and toggle button and side menu, i did file menu.html and putted all of this here:

<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar class="my-bar">
      <ion-nav-back-button></ion-nav-back-button>
      <ion-nav-buttons side="left">
        <button class="icon ion-navicon button button-clear mybutton" menu-toggle="left"></button>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menu"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <ion-header-bar class="bar-stable">
      <h1 class="title">Left</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item menu-close ng-click="login()">
          Login
        </ion-item>
        <ion-item menu-close href="#/app/search">
          Search
        </ion-item>
        <ion-item menu-close href="#/app/browse">
          Browse
        </ion-item>
        <ion-item menu-close href="#/app/playlists">
          Playlists
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

but a i can't understand how to display it at my pages, here is my index.html:

<body ng-app="starter">

    
  <ion-nav-view></ion-nav-view>
    
  </body>

and my another page feed.html:

<ion-view>
	<div class="bar bar-subheader 
	    item-input-inset bar-light mysearchbar">
	    <label class="item-input-wrapper">
	      <i class="icon ion-search placeholder-icon"></i>
	      <input type="search" ng-model="query" placeholder="Search">
	    </label>
	  </div>
	<ion-content class="has-subheader content">
		<ion-list>
			<ion-item class="item-thumbnail-left item-icon-right
	  item-text-wrap" href="#/tab/feed/details">
	  			<img src="http://www.extremetech.com/wp-content/uploads/2013/10/modular-motorola-project-ara1.jpg">
	  			<h2>Google's modular Ara phone d...</h2>
	  			<p>24.08.2015</p>
	  			<p>16:35</p>
			</ion-item>
			<ion-item class="item-thumbnail-left item-icon-right
	  item-text-wrap" href="#/tab/feed/details">
	  			<img src="http://www.extremetech.com/wp-content/uploads/2013/10/modular-motorola-project-ara1.jpg">
	  			<h2>Google's modular Ara phone d...</h2>
	  			<p>24.08.2015</p>
	  			<p>16:35</p>
			</ion-item>
			<ion-item class="item-thumbnail-left item-icon-right
	  item-text-wrap" href="#/tab/feed/details">
	  			<img src="http://www.extremetech.com/wp-content/uploads/2013/10/modular-motorola-project-ara1.jpg">
	  			<h2>Google's modular Ara phone d...</h2>
	  			<p>24.08.2015</p>
	  			<p>16:35</p>
			</ion-item>
		</ion-list>
	</ion-content>
</ion-view>

when i'm adding in my feed.html this html code:

 <ion-nav-buttons side="left">
	    <button menu-toggle="left" class="button button-icon icon ion-navicon mybutton"></button>
	  </ion-nav-buttons>

i'm getting this error: 'Controller 'ionNavBar', required by directive 'ionNavButtons', can't be found!'

What i'm doing wrong?

Upvotes: 1

Views: 1948

Answers (1)

Mudasser Ajaz
Mudasser Ajaz

Reputation: 6257

You do not have to add this piece of code in feed.html

<ion-nav-buttons side="left">
        <button menu-toggle="left" class="button button-icon icon ion-navicon mybutton"></button>
</ion-nav-buttons>

You already have added 

<ion-nav-back-button></ion-nav-back-button>
<ion-nav-buttons side="left">
        <button class="icon ion-navicon button button-clear mybutton" menu-toggle="left"></button>
</ion-nav-buttons>

in menu.html, any page with menu will have toggle button or back buttone automatically(in case you go further in navigation).

You want to add menu.html as menu , but in routes you are doing this 

{ $stateProvider .state('tabs', { url: '/tab', abstract: true, templateUrl: 'templates/tabs.html' })

Instead youd should do 

{ $stateProvider .state('menu', { url: '/menu', abstract: true, templateUrl: 'templates/menu.html' })

and further change feed routes to 

.state('menu.feed', {url: '/feed', views: {'feed-tab': {templateUrl: 'templates/feed.html', controller: 'MainCtrl'}}})

But as you have mixed tabs with menu scheme. I will suggest you to create new project with ionic start myApp sidemenu and see how sidemenu templating is done

Upvotes: 1

Related Questions