Controller 'ionNavBar', required by directive 'ionNavTitle', can't be found!

ionic-v1
1 
 <ion-nav-bar class="bar-positive backwellcome">
  <ion-nav-buttons side="left">
			<button class="button button-icon leftButtonArea" ng-click="goPrevious()">  <!-- id="back"> -->
				<i class="icon-left ion-arrow-left-c app-font-color-buttons-black"></i>
			</button>
   </ion-nav-buttons>
   <ion-nav-title>
    </ion-nav-title>
	</ion-nav-bar>
2

Not sure if I’m going crazy or you have a giant blank description. :wink:

The ionNavTitle needs to be a child of ionView and an ionNavBar needs to exist. Make sure you are not placing it inside of a div or another directive. Check the docs.

3

As @brandyshea has posted, you have your ion-nav-title in the wrong place.
Ion-nav-title can only be a child of ion-view.

4

Hi,

I have same error but I can’t seem why I get it:

<ion-nav-bar class="bar-assertive gradient-background-red shadow nav-title-slide-ios7 nav-bar-container" nav-bar-transition="android">
    <ion-nav-back-button class="hide"></ion-nav-back-button>
    <ion-nav-buttons side="left" class="hide"></ion-nav-buttons>
    <ion-nav-buttons side="right" class="hide"></ion-nav-buttons>
    <div class="nav-bar-block" nav-bar="cached">
        <ion-header-bar class="bar-assertive gradient-background-red shadow nav-title-slide-ios7 bar bar-header disable-user-behavior" align-title="left">
            <button class="button back-button hide buttons button-icon icon header-item ng-binding" ng-click="$ionicGoBack()">
			<i class="ion-arrow-left-c"></i> Retour</button>
            <div class="buttons buttons-left header-item"><span class="left-buttons"><button menu-toggle="left" class="button button-icon icon ion-navicon ng-binding">&nbsp;Menu</button></span></div>
            <div class="title title-left header-item"></div>
        </ion-header-bar>
    </div>
    <div class="nav-bar-block" nav-bar="active">
        <ion-header-bar class="bar-assertive gradient-background-red shadow nav-title-slide-ios7 bar bar-header disable-user-behavior" align-title="left">
            <button class="button back-button hide buttons button-icon icon header-item ng-binding" ng-click="$ionicGoBack()">
            <div class="buttons buttons-left header-item"><span class="left-buttons"><button menu-toggle="left" class="button button-icon icon ion-navicon ng-binding">&nbsp;Menu</button></span></div>
            <div class="title title-left header-item"></div>            
        </ion-header-bar>
    </div>
</ion-nav-bar>
<!--
          The views will be rendered in the <ion-nav-view> directive below
          Templates are in the /templates folder (but you could also
          have templates inline in this html file if you'd like).
        -->
<ion-nav-view name="root-view" animation="slide-left-right" class="view-container" nav-view-transition="android" nav-view-direction="none" nav-swipe="">
    <ion-tabs class="tabs-icon-top tabs-dark pane tabs-bottom tabs-striped" nav-view="active" style="transform: translate3d(0%, 0px, 0px);">
        <div class="tab-nav tabs">
            <ion-tab icon="icon ion-home" href="#/app/tab/home" title="Accueil"></ion-tab>
            <ion-tab icon="icon ion-heart" href="#/app/tab/favorites" title="Favoris"></ion-tab>
            <ion-tab icon="icon ion-gear-b" href="#/app/tab/account" title="Paramètres"></ion-tab>
            <a ng-class="{'tab-item-active': isTabActive(), 'has-badge':badge, 'tab-hidden':isHidden()}" ng-disabled="disabled()" class="tab-item tab-item-active" icon="icon ion-home" title="Accueil">
                <!-- ngIf: badge -->
                <!-- ngIf: getIconOn() && isTabActive() --><i class="icon icon ion-home" ng-if="getIconOn() &amp;&amp; isTabActive()"></i>
                <!-- end ngIf: getIconOn() && isTabActive() -->
                <!-- ngIf: getIconOff() && !isTabActive() --><span class="tab-title ng-binding" ng-bind-html="title">Accueil</span></a>
            <a ng-class="{'tab-item-active': isTabActive(), 'has-badge':badge, 'tab-hidden':isHidden()}" ng-disabled="disabled()" class="tab-item" icon="icon ion-heart" title="Favoris">
                <!-- ngIf: badge -->
                <!-- ngIf: getIconOn() && isTabActive() -->
                <!-- ngIf: getIconOff() && !isTabActive() --><i class="icon icon ion-heart" ng-if="getIconOff() &amp;&amp; !isTabActive()"></i>
                <!-- end ngIf: getIconOff() && !isTabActive() --><span class="tab-title ng-binding" ng-bind-html="title">Favoris</span></a>
            <a ng-class="{'tab-item-active': isTabActive(), 'has-badge':badge, 'tab-hidden':isHidden()}" ng-disabled="disabled()" class="tab-item" icon="icon ion-gear-b" title="Paramètres">
                <!-- ngIf: badge -->
                <!-- ngIf: getIconOn() && isTabActive() -->
                <!-- ngIf: getIconOff() && !isTabActive() --><i class="icon icon ion-gear-b" ng-if="getIconOff() &amp;&amp; !isTabActive()"></i>
                <!-- end ngIf: getIconOff() && !isTabActive() --><span class="tab-title ng-binding" ng-bind-html="title">Paramètres</span></a>
        </div>
        <ion-nav-view name="tab-home" class="view-container tab-content" nav-view="active" nav-view-transition="android">
            <ion-view class="pane" nav-view="stage" style="transform: translate3d(0%, 0px, 0px);">
                <ion-nav-title class="hide"></ion-nav-title>

As you can see I add an ion-nav-title directly after ion-view and there is a ion-nav-bar somewhere in HTML.

Did I do something wrong ?

EDIT: If I try to add view-title=“app” to my ion-view node, it change the title of the page …

5

Can you paste what the markup looks like in your code before it is rendered? Or give a working example of this, that would be better. :smile: